How to embed YouTube videos using the 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:
<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.
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025