[Resolved] Video iframe sizing issue!

Home Forums Support [Resolved] Video iframe sizing issue!

Home Forums Support Video iframe sizing issue!

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

    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>
    
    /div
    

    And here is my custom CSS:

    
    .video-header-container-16x9 {
      padding-bottom: 33%;
    }
     
    .video-header-container iframe {
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    .video-header-container {
    margin: -2% 0% 2% 0%;
    }
    
    
    #443448
    Tom
    Lead Developer
    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.

    #443870
    Ashton

    That works! Thank you so much!

    #444163
    Tom
    Lead Developer
    Lead Developer

    You’re welcome 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.