Support » Fixing WordPress » The fix for responsive video embeds does not work!

  • Resolved Ero77

    (@ero77)


    Hi,

    I have found a heap of articles online claiming to fix the issue of non-responsive YouTube video embeds. Can anyone advise my on why the following snippets of code will not make a video scale down correctly on my site?

    The HTML code on in my blog page:-

    <div class=”video-container”><iframe src=”https://www.youtube.com/embed/MHSuwcYxqX8&#8243; width=”300″ height=”150″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>

    Regarding this last pice of code, one thing that may be relevant is that I didn’t paste the iframe with the width and the height, it appears by itself when I save it or simply when I change the view from HTML to Visual.

    The CSS code in my stylesheet:- (not sure exactly where in the stylesheet it should go, so I stuck in right at the bottom!)

    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
    }

    .video-container iframe,
    .video-container object,
    .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    Some people say to remove the fixed dimensions from the iframe, but in most of the articles/posts online they tell you to copy and paste exactly as is so it may not matter that even if I don’t specify the width and heigh it appears by itself.

    I can’t have it life like this in my website, so I leave it in an old page I have which I have reactivated so you can see an example of what I mean – The video appears very small and if I change the width and heigh, then it appears big but it’s not responsive.

    Page: http://animales-perdidos.org/contactanos/

    If in the <iframe> I set with to 100% and height to auto, the width is responsive, but vertically I can only see the middle of my video (it appears cut from the top and bottom).

    I don’t know what else to do.

    Let me know if you need some more info.

    Any advice much appreciated!

    Thanks

Viewing 1 replies (of 1 total)
  • Apparently, it ended up to be a bug.

    For some reason, the video is not responsive while I’m logged in my WordPress website, but as soon as I log off and refresh the page, the video becomes responsive.

    So I will mark this question as resolved, although the bug is still there.

    If any future readers have the same problem, try logging out and refreshing the page – It works for me.

    Regards,

Viewing 1 replies (of 1 total)
  • The topic ‘The fix for responsive video embeds does not work!’ is closed to new replies.