[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 7 months, 1 week ago.

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%;
    }
    
    
    GP Premium 1.5.6
    #443448

    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.

    #443870

    Ashton

    That works! Thank you so much!

    #444163

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

You must be logged in to reply to this topic.