We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

How to make embed youtube video with correct ratio?

April 25, 2021 at 5:40 am #5670
[anonymous]
Hi, I use this code to embed a youtube video:
```
<figure class="post__embed--16x9"><iframe width="100%" height="auto" src="https://www.youtube.com/embed/VWdU5Hgdtmc" allowfullscreen="allowfullscreen"></iframe></figure>
```
It’s cropped on desktop website:

it looks fine on mobile device:

Here is the link of the post.

How can I fix it? Thank you.
April 25, 2021 at 8:23 am #5671
[anonymous]
Using the method described in this youtube video (https://youtu.be/X4t0JxiBeO0)

Add the following to custom CSS:
```
figure.post__embed--16x9 {
 width: 100%;
 height: 0;
 padding-bottom: 56.25%; /* for 16:9 aspect ratio */
 position: relative;
}

.post__iframe {
 position: absolute;
 width: 100%;
 height: 100%;
}
```
And change the iframe code’s height from “auto” to “100%”
```
<figure class="post__embed--16x9"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/VWdU5Hgdtmc" allowfullscreen="allowfullscreen"></iframe></figure>
```
April 29, 2021 at 11:38 pm #5703

[anonymous]

[anonymous] wrote:

Using the method described in this youtube video (https://youtu.be/X4t0JxiBeO0)

Add the following to custom CSS:

figure.post__embed–16×9 {

 width: 100%;

 height: 0;

 padding-bottom: 56.25%; /* for 16:9 aspect ratio */

 position: relative;

}

.post__iframe {

 position: absolute;

 width: 100%;

 height: 100%;

}

figure.post__embed–16×9 { width: 100%; height: 0; padding-bottom: 56.25%; /* for 16:9 aspect ratio */ position: relative; } .post__iframe { position: absolute; width: 100%; height: 100%; }

figure.post__embed–16×9 { width: 100%; height: 0; padding-bottom: 56.25%; /* for 16:9 aspect ratio */ position: relative; } .post__iframe { position: absolute; width: 100%; height: 100%; } And change the iframe code’s height from “auto” to “100%”

<figure class=”post__embed–16×9″><iframe width=”100%” height=”100%” src=”https://www.youtube.com/embed/VWdU5Hgdtmc” allowfullscreen=”allowfullscreen”></iframe></figure>

<figure class=”post__embed–16×9″><iframe width=”100%” height=”100%” src=”https://www.youtube.com/embed/VWdU5Hgdtmc” allowfullscreen=”allowfullscreen”></iframe></figure>

<figure class=”post__embed–16×9″><iframe width=”100%” height=”100%” src=”https://www.youtube.com/embed/VWdU5Hgdtmc” allowfullscreen=”allowfullscreen”></iframe></figure>

It works! Thank you so much!

April 30, 2021 at 4:53 am #5705
Bob
Hi guys,

Almost all of the themes support responsive iframe/video, by default the ratio is 16×9; when you embed the file via the editor UI the following class is added:
```
post__iframe 
or 
post__video
```
The rest of the available ratios are: 21×9, 4×3, and 1×1, to get them, just add the following additional classes:
```
post__iframe--21by9 
post__iframe--4by3
post__iframe--1by1
```
or
```
post__video--21by9
post__video--4by3
post__video--1by1
```
@Kuo uses the Editorial2 theme, this one and Massively come from a different author and was imported to Publii by me and the fact is I forgot to add support for responsive iframe/video here, but I just added it now, and new themes versions are now available for download.