Youtube videos are a great and easy way to add video functionality to your website. The advantage of this method is that it doesn’t use your own website bandwidth and leaves the heavy lifting of streaming the right size file to Youtube.
Step 1:
Grab the embed code from the Youtube video that you would like to embed
Step 2:
Modify the width and the height of the iframe to 100% and add the wrapper divs around the iframe
[code language=”html”]
<div class=”youtubevideowrap”>
<div class=”video-container”>
<iframe src=”https://www.youtube.com/embed/YOUTUBEID” width=”100%” height=”100%” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
</div>
</div>
[/code]
Step 3:
Include the following CSS in your stylesheet.
[code language=”css”]
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.youtubevideowrap{
width: 80%;
max-width: 780px;
margin: 0 auto;
}
[/code]
And voila! Your Youtube video embed will be full responsive.
