Video embed widget no longer full width or full height

  • I’m using a video embed widget (comes as standard with WordPress core) to embed a Vimeo video into a fairly narrow space. Scroll about half way down the listed link page on a large screen and look for the ‘Keynote speaker’ section on the right.

    The video widget isn’t new on this page and the video used to stretch the full width of it’s container. Since 5.5, the video doesn’t fill up all the space and has the dark grey border around the edge of it. It seems to stretch ok when in a bigger space though.

    I’ve tested this problem on a few different themes to be sure it’s not my code and I don’t think it is. Both the TwentyTwenty and Neve themes are doing the same thing. Also similarly with plugins, I have tested this on a vanilla WP install with no plugins and I have the same issue.

    I’ve had a look through the CSS and it seems on the .player class buried within the <iframe> tag itself there is inline output of a max-width and max-height attribute. Getting rid of these seems to be resolve the issue and the video stretches again as I want.

    Any ideas on how to resolve this as I’m not sure the best way to get rid of the inline stying or to override it?

    • This topic was modified 4 years, 1 month ago by hanopcan.
    • This topic was modified 4 years, 1 month ago by hanopcan.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • I have experienced similar issues in the past and most of the time is plugin related. I would check and test if any plugin, new plugin, updates ets. is causing this.

    Thread Starter hanopcan

    (@hanopcan)

    Thanks for the suggestion Kenneth. But no it’s not plugins. I should have been clear about that in my post above as I’ve tried this on a vanilla install with absolutely no plugins and still the same problem. I’m pretty sure it’s something coming from core, specifically the inline CSS I mentioned.

    Moderator bcworkz

    (@bcworkz)

    It appears the video is filling the space available; well, except for a small amount of padding. The overall <section> that contains it is set to be 1/3 the content area’s width and the video pretty much fills that except for 15px of padding on each side.

    I believe I fix it, but you may need to double check and tweak it a little bit more, but overall should be a good start.

    current code for your container: 

    
<div class="mejs-mediaelement"><mediaelementwrapper id="video-256-1" style="padding-bottom: 60px;"><div id="video-256-1-iframe-overlay" class="mejs-iframe-overlay"></div><iframe id="video-256-1_vimeo_iframe" width="219.984" height="123.741" frameborder="0" src="https://player.vimeo.com/video/298340126?loop=0&_=1&" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allow="autoplay" data-ready="true"></iframe><video class="wp-video-shortcode" id="video-256-1_from_mejs" preload="metadata" src="https://vimeo.com/298340126?loop=0&_=1" style="width: 100%; height: 100%; display: none;"><source type="video/vimeo" src="https://vimeo.com/298340126?loop=0&_=1"><a href="https://vimeo.com/298340126?loop=0">https://vimeo.com/298340126?loop=0</a></video></mediaelementwrapper></div>

Script after my tweaking: 

<div class="mejs-mediaelement"><mediaelementwrapper id="video-256-1" style="padding-bottom: 60px;"><div id="video-256-1-iframe-overlay" class="mejs-iframe-overlay"></div><iframe id="video-256-1_vimeo_iframe" width="100%" height="100%" frameborder="0" src="https://player.vimeo.com/video/298340126?loop=0&_=1&" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allow="autoplay" data-ready="true"></iframe><video class="wp-video-shortcode" id="video-256-1_from_mejs" preload="metadata" src="https://vimeo.com/298340126?loop=0&_=1" style="width: 100%; height: 100%; display: none;"><source type="video/vimeo" src="https://vimeo.com/298340126?loop=0&_=1"><a href="https://vimeo.com/298340126?loop=0">https://vimeo.com/298340126?loop=0</a></video></mediaelementwrapper></div>

    After I applied the changes the view was displaying at 100% w & h.

    Hope it helps!

    • This reply was modified 4 years, 1 month ago by Yui.
    • This reply was modified 4 years, 1 month ago by Yui. Reason: please use CODE button for proper formatting
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Video embed widget no longer full width or full height’ is closed to new replies.

Tags