Embedded video appears only when changing browser window size

  • Resolved sdari

    (@sdari)


    4 years, 7 months ago

    Hello. I’m facing a strange video embed issue.

    In any desktop browser (Chrome, Edge, etc.), I navigate to https://veganism101.com/faq-on-veganism-for-health/ and scroll all the way down to the question “Troubleshooting” and expand it.

    On the right there’s supposed to be an embedded youtube video (just above the caption: Custom HTML Embedded Video). But it’s not there. But when I minimize/maximize my browser window or even slightly change the browser window size, the video appears!

    I tried this on different desktop browsers, different desktop computers. Same issue. Surprisingly this issue does not happen when viewing on a mobile device.

    This is the code that I’m using to embed the video.

    <style>.codegena{position:relative;width:100%;height:0;padding-bottom:56.27198%;}.codegena iframe{position:absolute;top:0;left:0;width:100%;height:100%;}</style><div class=”codegena”><iframe width=”560″ height=”329″ src=”https://www.youtube.com/embed/OwlGTVh06NQ?&modestbranding=1&rel=0&#8243; frameborder=”0″ allowfullscreen=””></iframe></div>

    I have no idea what is causing this. Very strange behavior.

Viewing 2 replies - 1 through 2 (of 2 total)
  • yogeshyadav20

    (@yogeshyadav20)

    4 years, 7 months ago

    Hi @sdari

    Try this css to set your iframe height and width

    iframe.iframe-embed {
    width: 100% !important;
    height: 100% !important;
}

    and let me know if it’s fine for you

    Thanks

    Thread Starter sdari

    (@sdari)

    4 years, 7 months ago

    This worked beautifully!!!
    Very simple and effective.
    Thank you.

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

The topic ‘Embedded video appears only when changing browser window size’ is closed to new replies.