How to Create Responsive YouTube video

Table of Contents

Table of Contents

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

(Visited 177 times, 1 visits today)
Share

Share:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn
On Key

Related Posts

What Is a User Interface?

UI stand for User Interface, Someone who responsible to design the look, feel and interactivity of a digital interface whether is a website or mobile