I'm trying to make my iframe responsive, but I cant get the height to fit the TV border

Question

I made this iframe so I could put the TV border over the video player, and so far I've been trying to make it look good on mobile, so far it looks good on PC browsers (jsbin displays it weird, but in the actual site it looks good), but I don't get the height of the video to fit.

<html>
  <style>
    
    iframe {
      position: absolute;
      z-index: -1;
      left: 12%;
      top: 34%;
      width: 60%;
    }
    
    #TVborder {
      position: absolute;
      float: center;
      z-index: 0;
      left: 0px;
      width: 100%;
      pointer-events: none;
      }
      
  </style>
</head>
<body>
<img src="https://pngimg.com/uploads/tv/tv_PNG39278.png" width="100%" id="TVborder" />
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/Id3tNsMj_hA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>

What do you think would be the best approach to fix it?

And what would you add instead of the iframe? @Leandro Bardelli — Lucas Manuel Sylleros Saavedra, Nov 12 '21 at 00:30
https://stackoverflow.com/questions/18726480/embed-html5-youtube-video-without-iframe — Leandro Bardelli, Nov 12 '21 at 00:34
https://developers.google.com/youtube/player_parameters#Embedding_a_Player — Leandro Bardelli, Nov 12 '21 at 00:37
Tried this but still having the same exact issue: https://jsbin.com/xamaziqize/edit?html,output @Leandro — Lucas Manuel Sylleros Saavedra, Nov 12 '21 at 02:25

score 0 · Accepted Answer · answered Nov 12 '21 at 22:13

I fixed it by adding a container around the iframe and tweaking that a bit, here's how the code went out:

<html>
  <style>
    
    iframe {
      position: absolute;
      z-index: -1;
      width: 100%;
    }
    
    #TVborder {
      position: absolute;
      float: center;
      z-index: 0;
      left: 0px;
      width: 100%;
      pointer-events: none;
      }
      
   .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0%;
    height: 0;
    overflow: hidden;
}
   .embed-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
      
  </style>
</head>
<body>
<div class="embed-container">
<img src="https://pngimg.com/uploads/tv/tv_PNG39278.png" width="100%" id="TVborder" />
<iframe src="https://player.vimeo.com/video/622576121?h=92d4a4e5c6&amp;autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" style="position:absolute;top:20%;left:9%;width:66%;height:79%;" frameborder="0"></iframe>
</div>
</body>
</html>

I'm trying to make my iframe responsive, but I cant get the height to fit the TV border

1 Answers1