Skip Navigation

[Resolved] after paginating, the div wrapping an iframe disappears

This thread is resolved. Here is a description of the problem and solution.

Problem: How to display full width responsive video with Avada and views

Solution: To display full width responsive video with Avada and views You need to wrap the video field with div and assign custom class videoWrapper.

You can find proposed solution with the following reply: => https://toolset.com/forums/topic/after-paginating-the-div-wrapping-an-iframe-disappears/#post-594240

Relevant Documentation: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 5 replies, has 2 voices.

Last updated by Ido Angel 3 years, 8 months ago.

Assigned support staff: Minesh.

Author
Posts
#594115
before.JPG
after.JPG

hey,

i have a view containing a video, with pagination.
before pagination, the iframe is wrapped around a div "fluid-width-video-wrapper". but once i press "page 2", the div disappears and now suddenly the iframe has a certain width and height which i never applied.
take a look here:

hidden link

pagination is at the bottom of the page.

i'm also attaching images of "inspect element" - before and after pagination.

thanks!
ido

#594119

oh, you need access to see that page.
access deleted.
(please make this private)

#594230

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

I've added following CSS at your view's "VIMEO with Pagination" content template "Loop item in VIMEO with Pagination" CSS box:
=> hidden link

iframe[src*=vimeo],[src*=youtube] {
    width: 720px;
    height: 405px;
}

You can adjust the height and width as per your need.

#594234

Hey Minesh,
Thanks - but this only partially solves the issue. Best way to adjust an iframe is position it absolute inside a div with padding. This is exactly what you did in the latest views update. Up until now the div "fluid-width-video-wrapper" wasn't there and it was added in the last update to ensure a proper fluid width of the iframe. But there seems to be a bug somewhere as you can see, that after an ajax operation this div disappears and with it goes the fluid width of the iframe.
I think you should fix it 🙂
Giving CSS width to an iframe won't work responsively.
Cheers!
ido

#594240

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Well - I checked the source of of view's plugin and I did not see such class added to view's plugin.

Then I checked on your install and I can see that it's coming from your theme. I checked your parent theme and I find in your parent theme's CSS file there is such class ".video-shortcode" and ".fluid-width-video-wrapper" is available.

So, I've added following CSS to your content template.

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

And following JS to your content template:

jQuery(document).ready(function($){
  $('.videoWrapper div.fluid-width-video-wrapper').removeClass('fluid-width-video-wrapper');
});
#594241

thanks!
this did it. i think maybe it's an avada update for handling iframes.
cheers 🙂
ido