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

[Author]

Posts

[Ido Angel]

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

[Ido Angel]

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

[Minesh]

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.

[Ido Angel]

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

[Minesh]

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');
});

[Ido Angel]

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