Skip to content

How to embed YouTube videos using the correct aspect ratio

New Course Coming Soon:

Get Really Good at Git

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"}>
</iframe>

Tailwind code without React:

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

Plain HTML and CSS

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

The YouTube embed URL is something like

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

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

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

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

<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.

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!
→ Get my CSS Handbook
→ Read my CSS Tutorial on The Valley of Code

Here is how can I help you: