# How to embed YouTube videos using the correct aspect ratio

> Learn how to embed a YouTube video with the correct aspect ratio using the CSS aspect-ratio property or Tailwind's aspect-video class, no padding hacks.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2022-12-14 | Topics: [CSS](https://flaviocopes.com/tags/css/) | Canonical: https://flaviocopes.com/how-to-embed-youtube-videos-correct-aspect-ratio/

I had this problem.

I wanted to embed a YouTube video in a page, but since you need to use an `iframe` I couldn’t figure out how to properly set the height and width for it, in a way that would work on a fluid layout.

After a while I found the solution

Tailwind code with [React](https://flaviocopes.com/react/):

```jsx
<iframe className="aspect-video w-full"
  src={"Youtube embed URL"}>
</iframe>
```

Tailwind code without React:

```html
<iframe class="aspect-video w-full"
		    src="Youtube embed URL">
</iframe>
```

Plain HTML and CSS

```jsx
<iframe style="aspect-ratio: 16 / 9; width: 100%"
  src="YouTube embed URL"></iframe>
```

The YouTube embed URL is something like

```jsx
https://www.youtube.com/embed/VIDEO_ID
```

So if you have the video URL you must change that, for example with

```jsx
videourl.replace('https://www.youtube.com/watch?v=', 
  'https://www.youtube.com/embed/')
```

Some old tutorials still list the absolute/relative trick, like this: 

```html
<style>
.videocontainer {
	position:relative; 
	padding-bottom:56.25%;
}
.videocontainer iframe {
	width:100%;
	height:100%;
	position:absolute;
}
</style>

<div class="videocontainer">
  <iframe src="YouTube embed URL"></iframe>
</div>
```

I prefer the simpler [aspect-ratio property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).

If you need to work out dimensions for a given ratio, try the [aspect ratio calculator](https://flaviocopes.com/tools/aspect-ratio/).