✒️
Here are my favorite tips to land the software engineer interview.
Here are my favorite tips to land the software engineer interview.
How to Get Rid of YouTube Player Black Bars
Published Jun 7, 2020
∙ Updated May 2, 2022
When embedding YouTube videos into a webpage, getting rid of the black bars and creating a fully responsive player can be confusing.
Suppose I have this <iframe>
wrapped inside a <div>
.
<div class="videoContainer">
<iframe src="https://www.youtube.com/watch?v=E1tofEyT8Jg"></iframe>
</div>
We can style .videoContainer
and .player
like so.
.videoContainer {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.videoContainer iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 0;
}
We want 56.25%
for padding-bottom
because it corresponds to a 16:9
aspect ratio (9 / 16 = 0.5625
).
This will give us a responsive YouTube player free of black bars.