Video Width Jumping around

Support
#1

on this page.

https://vanyadesigns.com/?page_id=808&preview=true

near the bottom of the page we’ve placed iframes for both a vimeo and youtube version of a video.

the videos width varies randomly.

looking at inspect element the issue seems to be the body tag within the iframe, but that seems impossible for such large video providers to have such an error in their iframes.

Conversely however it seems impossible that the problem would be originating from our site as width jumping of the two iframes is not synchronised, the iframes are always the same size and the iframes are not allowing js from the site to execute as they are cross-origin.

#2

Hi @alex5252,

Thank you for writing in, that page seems to be a draft page, we can’t view it.

Are you using the Video element for placing your video on that page? If so, please see the FRAME tab, and configure the Content Sizing accordingly.



Cheers!

#3

I added the log in in the secure note so you could take a look.

Also , here is a video showing what is going on: https://youtu.be/NhCGV6L04fA

#4

Hi @alex5252,

It’s your custom css in Theme Options > CSS that is causing the issue.

I tried removing it all and the issue was gone. Try to do the same then add the code back bits by bits while checking every time. That way you will know which specific code is causing the issue.

Thanks

#5

So upon further investigation when the browser width is at 1903px the width of the html element in the iframe oscillates when hovered, when the x-container is given a max-width equal to or greater than (100% - 15px). In the theme options css I had a rule styling x-containers to have a max-width of 100%. however when this rule (and everything else in the stylesheet) is removed and the screens width is reduced to around 1700px the problem occurs once more.

Knowing this I tried to replicate the issue on another site of ours that has x but could not replicate the behavior.

It seems that there is some more underlying error on this site that only expresses itself by making iframe html elements oscillate in width when the x-container has max-width: greater than (100% - 15px).

#6

just to be clear the reason the video jumps around at around 1700px is that the x-containers by default are styled to have a max-width of 1500px. when the screen size is around 1700px the x-container is around 1500px, Therefor greater than (100% - 15px) that was previously mentioned as the threshold at which the jumping around occurs

#7

I don’t know if my issue is related to this or not…

I’m using the LearnDash LMS plugin. Embeded videos within my eLearning course’s lessons don’t resize to fit the page. They don’t appear to be constrained to the rest of the ‘template’ like images are. Consequently, the right-hand side of the video player is effectively unseen.

When I switch to the WordPress 2019 theme this problem goes away. Therefore, I’m assuming that it’s Pro theme related.

I’m using the latest versions ofWordPress, Pro theme, and the LearnDash plugin.

#8

Hi @alex5252,

This may sound easy but it takes me time to find, the issue is with the Parallax effect on the Classic Section (Section 5 of that page). It might have a conflict with your custom CSS or with the iframe video itself (JS). If you need to the parallax effect please use the new Section instead. And if it possible please update the site to the latest version (Wordpress, Theme, Plugins) to avoid any potential incompatibility errors.

Thanks,

#9

Hi @ms999k,

That sounds a completely different issue, please create your own thread and on that thread please provide us a direct page URL where we can see the said video.

How To Get Support

Thanks,

#10

I didn’t even realize that section with the parallax was there for it was hidden. unselecting parallax does seem to fix the problem. Thank you.

#11

You’re more than welcome, glad we could help.

Cheers!

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.