[Resolved] Video iframe sizing issue!

Home Forums Support Video iframe sizing issue!

This topic contains 3 replies, has 2 voices, and was last updated by  Tom 10 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #443442


    I have been wrestling with an iframe video issue for weeks now. Basically I want the video in an iframe to be responsive I tried dozens of ways to make that possible before I found one that works. However now I’m finding on bigger screens, it breaks and the video is way small on Internet Explorer and Firefox, Chrome works perfect. If you go the the website http://hirshprecisionproductsinc.com/ and if you have a big monitor or two monitors to stretch it the video goes from responsive to not.

    Please help me I don’t know how else to fix this.

    Here is my HTML on the page:

    div class="video-header-container video-header-container-16x9"
    <iframe src="https://player.vimeo.com/video/243004295?autoplay=1&loop=1&title=0&byline=0&portrait=0" width="300" height="150" allowfullscreen="allowfullscreen"></iframe>

    And here is my custom CSS:

    .video-header-container-16x9 {
      padding-bottom: 33%;
    .video-header-container iframe {
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
    .video-header-container {
    margin: -2% 0% 2% 0%;
    GP Premium 1.5.6

    Tom Lead Developer

    Hi there,

    Have you tried this code?: https://docs.generatepress.com/article/responsive-videos/

    Getting iframes to be responsive is difficult unfortunately, especially cross-browser.



    That works! Thank you so much!


    Tom Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.