Displaying a YouTube video with iframe full width of page
Solution 1
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>
Solution 2
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);
}
user2953989
Updated on July 09, 2022Comments
-
user2953989 almost 2 years
I've put a video in my site using an
iframe
from YouTube, while theiframe
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
-
Thomas Orlita over 7 yearsThanks! Use
height: calc(100vw/1.77777778);
to remove extra black line. -
rraallvv almost 6 yearsFor some reason the video is not showing up on Google Chrome on Android. Any idea what could be the problem?
-
Lajos Mészáros over 5 yearsAdding source: css-tricks.com/NetMag/FluidWidthVideo/…
-
6754534367 about 5 yearsWhy the padding-top: 25px; ?
-
Francisco Gonzalez Rull almost 5 yearsUse https in the youtube URL when possible. In my case without https the video wouldn't show in Chrome.
-
stephenmurdoch about 4 yearsUse www.youtube-nocookie.com when embedding stuff from them on your site.