Automatic height when embedding a YouTube video?

Question

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>

Does this answer your question? [Displaying a YouTube video with iframe full width of page](https://stackoverflow.com/questions/38270661/displaying-a-youtube-video-with-iframe-full-width-of-page) — MrUpsidown, Oct 13 '20 at 10:58
Does this answer your question? https://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width — MrUpsidown, Oct 13 '20 at 10:59

score 143 · Accepted Answer · edited Jul 27 '22 at 17:14

143

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.

EDIT: If you need to use percentage width other than 100%, multiply the ratio by the width multiplying factor. See the example below:

.video-container {
  position: relative;
  padding-bottom: calc(56.25% * 0.75); /* 16:9 */
  width: 75%;
  height: 0;
}

edited Jul 27 '22 at 17:14

Camilo Munhoz

3
1

answered Feb 28 '19 at 11:19

MD Ashik

9,117
10
52
59

1

@RTW Can you explain, little bit – MD Ashik Aug 14 '19 at 08:05
delete col-sm-6 styles – ZiiMakc Aug 14 '19 at 10:49
1

reference https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed – Dory Daniel Oct 27 '20 at 11:58
this code didnt work for me unless .video-container also has `width: 100%` set on it, just like the example in the [source](https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed) this is copied from – benmneb Sep 19 '21 at 11:44
delete height: 0; – Sherman Chen Dec 31 '21 at 19:44
According to the article, you can remove width/height attributes on iframe – Adam Sep 16 '22 at 01:49
And for those who wonder where `56.25%` comes from, the given ratio is 16:9, this means if width is 16%, then height is 9%. But as we want to have 100% width, we have to multiply the fraction on top and bottom with 100/16. 16 * 100/16 = 100 and 9 * 100/16 = 56.25. So in other words, when width is 100%, then height must be 56.25% to keep ratio 16/9 – Adam Sep 16 '22 at 01:54
The linked example is assuming you are using/importing `bootstrap` with multiple `
`s and `
`. How would you get the same 2 video column effect without using this?
– not2qubit Oct 10 '22 at 13:24
Using this means bootstrap ? Bootstrap for layout and grid, you can do it by display flex or grid . – MD Ashik Oct 12 '22 at 04:46

score 31 · Answer 2 · answered Nov 02 '22 at 04:20

31

For everyone who looks for solution in 2022 and later: Now in CSS we have aspect-ratio property, just set your width (In any way: px/%/...) and then add aspect-ratio property with... well... Aspect ratio.

iframe { 
  width: 100%;
  aspect-ratio: 16 / 9;
}

<iframe src="https://www.youtube.com/embed/SNE2oCZH_4k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

answered Nov 02 '22 at 04:20

Komp Tip

467
5
8

1

You can add height 100% as well. There's a more elaborate explanation of the old and new methods here: https://gomakethings.com/responsive-iframes-with-the-css-aspect-ratio-property/ – Dvaeer Apr 01 '23 at 12:45
Note, IE is not supported with it (for those that find this important) – Kevin Danikowski Apr 10 '23 at 13:49
You missed setting height to 100% or to auto in order your solution to work – bora89 Apr 23 '23 at 22:06
@bora89 you can set any of width or height to any value and other one will use proprtion of aspect-radio to it – Komp Tip Apr 23 '23 at 22:31

score 10 · Answer 3 · edited Dec 25 '20 at 15:10

10

If you go for the entire viewport you can use following code:

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

edited Dec 25 '20 at 15:10

Alex

2,707
4
29
42

answered Sep 25 '20 at 12:20

michal.jakubeczy

8,221
1
59
63

Ross Rogers · Answer 4 · 2020-04-08T16:15:12.977

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>

Thank you. This worked well for my requirement. – Chandana Jul 31 '21 at 08:25 — Chandana, Jul 31 '21 at 08:25

Brian Zelip · Answer 5 · 2021-02-23T20:50:42.247

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);
  }
}

There is a new aspect-ratio property in CSS. Why not use that? Just wondering can you do that with aspect-ratio property along with width from the parent element, which is also a grid column with 1fr property? — Faizan Anwer Ali Rupani, Sep 21 '22 at 08:07

Automatic height when embedding a YouTube video?

5 Answers5

Linked