If You Want Adsense Approval for your blog JOIN US Adsense Ready theme Now!

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.

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>

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.