How to embed YouTube iframe video 100% full width

Question

Just thought someone will be interested in knowing how to embed a YouTube iframe or any 16:9 video (e.g. Twitch live widget, Vimeo etc.)

YouTube usually gives you a fixed size video width="560" height="315". But usually, people want to embed it as full width so that it looks good and also responsive.

But setting it to 100vw will just mess up the site as it goes out of the container and also the height cannot be determined.

So the iframe has to be 100% width according to its container, which can be done by simply adding width="100%". But the height is still messed up, setting it to 100% will not work.

And it has to work when viewer changes their screen size, either moving the phone from vertical to horizontal or maximizing windows.

Answer 1

I know this question is tagged with JavaScript but the solution is a lot more simpler with CSS. All you need to do is wrap the video embed inside a div and apply CSS.

<div class="videoWrapper">
<!-- Video embed goes here -->
</div>

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 2

So here's a solution that I come up with with the help of JavaScript. The problem we have here is that the height cannot be determined without knowing the width and since the width is dynamic there is no way to hard code the height.

We can get the width of the element using JavaScript, with it, we can calculate the height using the aspect ratio of 16:9 for standard video. Of course, you can change the aspect ratio to something else but usually, YouTube video comes with the aspect ratio of 16:9.

This code will make the iframe full width according to its container. That means if the body is 100px and the container is 80px if the iframe is in the container the width will be 80px. There won't be going out of the container and mess up with the responsive design.

This code will resize the iframe every time the page is loaded or resized, making sure that it is always maintaining the 16:9 aspect ratio. Most people might be using a phone to view it and make sure it resizes when the phone move from vertical to horizontal might be important.

Here's how to do it:

window.addEventListener("load", playerSizer);  /* Resize on load */
window.addEventListener("resize", playerSizer);  /* Resize on change in window size */

/* Resize function */
function playerSizer() {
  var player = document.getElementById("player");  /* Element ID */
  var width = player.offsetWidth;  /* Get width */
  player.style.height = (width * 0.5625) + "px";  /* Aspect ratio */
}

<center>
  <!-- Remember to change your YouTube URL -->
  <!-- Note width="100%", this will be used to calculate height -->
  <!-- Note id="player", this will be used by JavaScript function -->
  <iframe 
    id="player" 
    width="100%" 
    src="YOUR URL" 
    frameborder="0" 
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
      Your browser does not support this, try viewing it on YouTube: YOUR URL
    </iframe>
</center>

Here's the code if you don't want to separate JavaScript with HTML:

<center>
  <iframe id="player" width="100%" src="YOUR URL" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>Your browser does not support this, try viewing it on YouTube: YOUR URL</iframe>
</center>
<script>
  window.addEventListener("load", playerSizer);
  window.addEventListener("resize", playerSizer);
  function playerSizer() {
    var player = document.getElementById("player");
    var width = player.offsetWidth;
    player.style.height = (width * 0.5625) + "px";
  }
</script>

Hope this helps 😉

Answer 3

Personally when i have to deal with youtube video embeds i use fitVidsJS, i just put the embed code inside a div with the width i want the video to be displayed and then call fitVids(), that will take care of it, keeping the 16:9 aspect ratio and mantaining it responsive when the user resizes the page.

In short, the code will look like this, remember to load fitVidJs in your page

$(document).ready(function(){
  $('.youtube-video').fitVids();
});

.youtube-video{
  width: 85%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="youtube-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

I've used this system for a few projects so far and never had issues, it also supports other video platforms but i only used it with youtube