How to Create Responsive YouTube video

You have awesome video to share with your reader, but have problem if your reader view the video in their tablet or mobile device, Here are simple trick how to make your embedded YouTube video responsive.

First you will need to add the following code to your CSS or style sheet.

CSS

.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%;
}

Next, you need to add some HTML around your embed code.
HTML

DEMO

Share