Displaying a YouTube video with iframe full width of page

Question

I've put a video in my site using an iframe from YouTube, while the iframe is full width (100%) the video is very small (height) within the frame. How do I make it fit the width of the container?

Code:

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5m_ZUQTW13I" frameborder="0" allowfullscreen></iframe>

See screenshot

Possible duplicate of [Shrink a YouTube video to responsive width](http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width) — Alon Eitan, Jul 08 '16 at 15:44
Please show code you are using so we can give you a possible solution — Artem Ankudovich, Jul 08 '16 at 15:46
Another quick fix is to use ```transform: scale(2);``` and give the iframe a lower ```z-index``` — Ryan Walker, Jul 08 '18 at 19:51
A video attempting to overlap a container, with high z-index, will still get clipped if the container or its parents have overflow: hidden, or auto, in its definition. Track down the definition and override it locally with overflow: visible, or use the transform trick to start a new z stack. — DragonLord, Sep 10 '21 at 18:05

score 110 · Accepted Answer · edited Apr 23 '21 at 02:13

110

To make a You Tube Video full width and preserve the height (and keep it responsive) you can use the following setup.

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

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

<div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="https://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

edited Apr 23 '21 at 02:13

Ajith Gopi

1,509
1
12
20

answered Jul 08 '16 at 15:47

Web Develop Wolf

5,996
12
52
101

For some reason the video is not showing up on Google Chrome on Android. Any idea what could be the problem? – rraallvv Aug 05 '18 at 10:56
4

Adding source: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php – Lajos Mészáros Nov 08 '18 at 10:38
4

Why the padding-top: 25px; ? – 6754534367 May 08 '19 at 23:58
1

Use https in the youtube URL when possible. In my case without https the video wouldn't show in Chrome. – Francisco Gonzalez Rull Jun 07 '19 at 09:31
Use www.youtube-nocookie.com when embedding stuff from them on your site. – stephenmurdoch May 03 '20 at 23:49

score 28 · Answer 2 · answered Jul 08 '16 at 15:47

The issue is that an iframe and video can't scale like an image, where it gets the proportionally correct height based on the aspect ratio if you just leave the height at the default.

A solution for this is to figure out the native width/height of your video, and do a little math to figure out what the height should be at 100% screen width. Assuming it's 1920x1080, you can do something like this using viewport width (vw). You can reduce the 100vw to whatever fits better, if you don't want it to literally fill the screen.

iframe{
 width: 100vw
 height: calc(100vw/1.77);
}

Thanks! Use `height: calc(100vw/1.77777778);` to remove extra black line. — Thomas Orlita, Nov 13 '16 at 20:05

score -3 · Answer 3 · answered Jul 08 '16 at 15:47

Use the fullscreen attribute:

<html>
 <body>
  <iframe id="myFrame" src="http://www.youtube.com/embed/W7qWa52k-nE" frameborder="0" allowfullscreen></iframe>
 </body>
</html>

If it not worked then also include the following css code:

#myFrame{
position:relative;
top:0;
left:0;
width:100%;
height:100%;

Displaying a YouTube video with iframe full width of page

3 Answers3

Linked