Currently, I am working on embedding a responsive Youtube video. I have managed to make it responsive using code that I found online. However, I am facing an issue where the height of the video does not adjust to 100% when the width is small. I want the height to always be 100%, even if it means having black bars at the top and bottom when the width is reduced.
I came across a website where this functionality has been implemented successfully. You can see an example on this page. There, the video remains centered when the width is decreased instead of sticking to the top.
Here is the HTML code I am using:
<div id='wrap-player'>
<div class="video-container">
<div id="player"></div>
</div>
</div>
And here is the CSS:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
right: 0;
left: 0;
}
#wrap-player {
width: 100%;
height: 100%;
/*position: absolute;*/
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I have also created a Fiddle for reference.