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.