I am trying to: Display related videos in a view.
Link to a page where the issue can be seen: hidden link
I expected to see: The View works fine except that the videos should be displayed in 3 columns but are, instead, full screen. The field in the CPT is an embedded media field which contains YouTube URLs. I can see that the iframe is set to a size that I think is breaking out of the column.
I switched Bootstrap on 🙂
Having made this View work in a CPT, I'm now having problems with a similar view (videos displayed in a bootstrap multi-column layout) on a standard page type at hidden link
Bootstrap is now being loaded by Toolset so I don't understand why this isn't working on this page.
Hi, it looks like the row and columns are formatted a bit differently in this View. Can you please copy + paste the code from the Loop Output editor of the View on the Videos page? I will review it and follow up with you shortly.
Hi Christian,
Thanks, I checked the code against another view that is working as it should (see hidden link).
The only difference between the two is that one is showing embedded videos and the other images.
Here's the code from the embedded videos view (that isn't working as should)
Loop Editor
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="container wpv-loop js-wpv-loop">
<wpv-loop wrap="4" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-sm-3">[wpv-post-body view_template="Loop item in All Videos"]</div>
[wpv-item index=other]
<div class="col-sm-3">[wpv-post-body view_template="Loop item in All Videos"]</div>
[wpv-item index=4]
<div class="col-sm-3">[wpv-post-body view_template="Loop item in All Videos"]</div>
</div>
[wpv-item index=pad]
<div class="col-sm-3"></div>
[wpv-item index=pad-last]
<div class="col-sm-3"></div>
</div>
</wpv-loop>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
Loop item
[types field="video-embed"][/types]
Output Editor
[wpv-filter-meta-html]
[wpv-layout-meta-html]
I can see in the page source that the col-sm-3 div is being replaced with the video player element. This seems to be causing the column width problem. As a test, please add a wrapper div around the video embed shortcode in the Loop Template:
<div>[types field="video-embed"][/types]</div>
If the video embed replaces this nested div, it will not affect the column size. Let me know if this does not resolve the problem.
Hi Christian,
That has fixed it. Thanks!
Is that all I need to do? Is this the best/complete solution?
Regards
Patrick
It seems to be happening only if Divi and Layouts are active at the same time. These two systems should not be used together. If you want to use Divi, we recommend deactivating the Layouts plugin. You can use Content Templates with Divi instead of the Layouts plugin. Here is some additional advice for using Divi and Toolset together: https://toolset.com/documentation/recommended-themes/toolset-divi-integration/
If you must use Divi and Layouts together for some reason, the extra wrapper div is the best workaround at this time. I will escalate the problem to my 2nd tier support team as a compatibility issue and let you know what I find out - it may not be addressed since the recommended workflow is different.
Okay I spoke with my 2nd tier support team, and we have determined that this issue only happens when Divi and Layouts are used together, so we will not address it as a bug. Our recommendation is to deactivate Layouts if you use Divi. Thanks for the report, and let me know if you have any additional questions about that.
