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

<div class="video-container">
<iframe width="640" height="360" src="https://www.youtube.com/embed/videoseries?list=PLjpMVBIry_4WPnzJBRN3Dnuo-r8mL2rE2" frameborder="0" allowfullscreen></iframe>
</div>

DEMO

(Visited 87 times, 1 visits today)
3