Make responsive videos with css

If you are a web designer or theme designer, of course you are familiar with the name iframe, object or embed. Yes the code is mostly for displaying a video. Videos are quite difficult to make responsive, if you use HTML5 of course it is quite easy to make responsive, just use max-width: 100% only. Example code:

video {
   max-width: 100%;
   height: auto;
  }

Then what about iframe, object and embed code, such as embed code from youtube, vimeo, dailymotion and others. You can use special tricks such as using relative and absolute positions. OK, here's the css code:

.video {
   position: relative;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
  }
  
  .video iframe,  
  .video object,  
  .video embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
  }

If you have a blog on blogger.com then please edit your template, enter the css code above before the code ]]></b:skin>
Then enter the HTML code example as follows in your post:

<div class="video">
   <iframe width="560" height="315" src="https://www.youtube.com/embed/iTwpfQGnqfE" frameborder="0" allowfullscreen></iframe>
  </div>

Yups ... like the example above after entering css in the style then you just need to add the code <div class="video">kode video</div>

Demo