How To Make Videos Responsive with CSS

How To Make Videos Responsive with CSS

A responsive website means It will respond to your browser sizes or I can browser stretches. The basic idea of it is to give optimal viewing experience to visitors, nowadays you will rarely see a unresponsive website. If you remember a Jquery snippet I posted about detecting browser real time size It is also responsive. So basically in order to make websites responsive on load you need a meta tag that helps you to stretch/resize the elements of your website but It's not required for this tutorial.

So for this tutorial, only videos with iframe, embed or objects works. You can get the iframe code of any videos from popular websites like YouTube, DailyMotion, Vimeo, MetaCafe etc.

Let's make our style, here's the css we need(if you are a beginner make sure you put the codes within <style>) :

 .Responsive-Video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
.Responsive-Video iframe, .Responsive-Video object, .Responsive-Video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

So after adding the css to your web page, add your video embed code within the div class given below(I know this is NOOB! )  :

<div class="Responsive-Video">


Example :

<div class="Responsive-Video">
    <iframe width="760" height="720" src="" frameborder="0" allowfullscreen></iframe>

Screenshot : 

YouTube Responsive Video

If you're using Blogger or Wordpress you can just add the css code within the body and whenever you post a video in your post you can add the embed code within the div class.

How To Target Mozilla FireFox With CSS

How To Target Mozilla FireFox With CSS

Every web designer/developer knows about CSS rules even beginners know it so in this we are using as rule that targets only Mozilla FireFox. What I mean with targeting is, It's like the the style under this rule will only work on Mozilla FireFox. This rule is really useful because we can define what to show and what not to show. You can also target for Google Chrome and Safari I will write about it another time.


As you see in the code the H1 and H2 styles have been modified and that targets Mozilla Firefox(@-moz-document url-prefix()). So likewise you can add any style that you want to show up only with Mozilla Firefox.