← flaviocopes.com

How to embed YouTube videos using the correct aspect ratio

Published Dec 14 2022

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:

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

Tailwind code without React:

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

Plain HTML and CSS

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

The YouTube embed URL is something like


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


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

.videocontainer {
.videocontainer iframe {

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

I prefer the simpler aspect-ratio property.

Wanna go from noobie to expert?

I wrote an entire book on this topic 👇

© 2023 Flavio Copes Flavio Copes using Notion to Site Notion to Site. Follow on Twitter

Solopreneur? Wannabe? Adventure awaits