Automatic height when embedding a YouTube video?
Solution 1
This article contains a good answer, copied below.
CSS:
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Example Html
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/_TyJeKKQh-s?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
How this works: The container element is given a zero height and a percentage bottom padding. The percentage bottom padding is a percentage of the container width, so that gives it a fixed aspect ratio. But in order to get the iframe to show up inside the zero-height container, you need to make the container relative and the iframe absolute, positioned inside the div.
See a live example.
Solution 2
If you go for the entire viewport you can use following code:
iframe{
width: 100vw;
height: calc(100vw/1.77);
}
Solution 3
I was able to make a responsive iframe size using vw
on both width and height of the style element because I know the amount of horizontal width I want the elements to use and then I calculate the height based on the width and the knowledge that the video is 16:9. If you want the video to consume 45% of the horizontal space above screen sizes of 893px and 90% otherwise, then:
.embedded-video-16-9 {
width: 90vw;
height: 50.625vw; /* 90*9/16 */
margin-left: 5vw;
margin-right: 5vw;
}
@media (min-width: 893px) {
.embedded-video-16-9 {
width: 45vw;
height: 25.3125vw; /* 45*9/16 */
margin-left: 2vw;
margin-right: 2vw
}
}
Used like:
<iframe
class="embedded-video-16-9"
src="https://www.youtube.com/embed/_TyJeKKQh-s?controls=0"
frameborder="0"
allowfullscreen=""
></iframe>
Solution 4
The html width
attribute only accepts numbers ("valid non-negative integers"), not strings suffixed with units of measurement (%, px, vw, etc) as in the original question.
If you know the width of the iframe
's container (in an absolute unit like px
or vw
, not %
) then you can use css calc()
for a one-line height
solution in css:
.youtube-embed {
--container-width: 720px;
--ratio: calc(16 / 9); /* 1.77 */
width: 100%;
height: calc(var(--container-width) / var(--ratio));
}
Here's a responsive solution that accounts for horizontal padding on the container:
:root {
--video-ratio: calc(16 / 9);
--video-container-max-width: 640px;
--video-container-x-padding-sum: 2rem; /* eg, padding: 0 1rem */
}
.youtube-embed {
--video-container-width: calc(100vw - var(--video-container-x-padding-sum));
width: 100%;
height: calc(var(--video-container-width) / var(--video-ratio));
}
@media only screen and (min-width: 672px) {
.youtube-embed {
--video-container-width: var(--video-container-max-width);
}
}
Dominic Newman
Updated on July 09, 2022Comments
-
Dominic Newman almost 2 years
i've embed a YouTube video on my website but the trouble is that i need the height to automatically adjust based on the width and the aspect ratio of the video. So if my width is 1280, my height should be 720 if the video is 16:9. I've tried using 'VW' and 'VH' units but these don't seem to work with an iframe. My width is already set proportionally.
My code is below:
<iframe style="margin-right: 1%; margin-left: 1%;" width="98%" height="" src="https://www.youtube.com/embed/HwzQbfde-kE" frameborder="0"></iframe>
-
MD Ashik almost 5 years@RTW Can you explain, little bit
-
ZiiMakc almost 5 yearsdelete col-sm-6 styles
-
Dory Daniel over 3 yearsreference h3xed.com/web-development/…
-
Chandana almost 3 yearsThank you. This worked well for my requirement.
-
benmneb over 2 yearsthis code didnt work for me unless .video-container also has
width: 100%
set on it, just like the example in the source this is copied from -
Sherman Chen over 2 yearsdelete height: 0;