How to Make Embedded Video Responsive Using CSS. Responsive web design is what most of my clients want. I usually use Bootstrap which is the most popular framework today for developing responsive websites. You can go to their website and read more about it.
On this tutorial, I will show you how to make your embedded video responsive. I just saw this over the internet and I guess it’s a good thing to share it with you.
INDEX.HTML
Sample code snippets in index.html.
<div class="container">
<div class="video-container">
<div id="video-player">
<!-- YOUR EMBEDDED CODE HERE -->
</div>
</div>
</div>
STYLE.CSS
Sample code snippets in style.css.
.container{
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.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;
}
SAMPLE EMBEDDED VIDEO
If you have questions, feel free to contact me or comment below.