Skip Navigation

[Gelöst] after paginating, the div wrapping an iframe disappears

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

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 support ticket is created vor 6 Jahren, 11 Monaten. There's a good chance that you are reading advice that it now obsolete.

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.

Heute stehen keine Supporter zur Arbeit im Werkzeugsatz-Forum zur Verfügung. Sie können gern Tickets erstellen, die wir bearbeiten werden, sobald wir online sind. Vielen Dank für Ihr Verständnis.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

Dieses Thema enthält 5 Antworten, hat 2 Stimmen.

Zuletzt aktualisiert von Ido Angel vor 6 Jahren, 11 Monaten.

Assistiert von: Minesh.

Author
Artikel
#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:

versteckter 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

Sprachen: Englisch (English )

Zeitzone: 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:
=> versteckter 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

Sprachen: Englisch (English )

Zeitzone: 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