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.