Adaptive Youtube video iframe on your WordPress page
Please add additional rows to .css style file of your web page before inserting Youtube video iframe on it:
[code language=”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%;
}
[/code]
When done, you could use html source code from example to insert Youtube video iframe:
[code language=”html”]
<div class=”video-container”> <iframe width=”1200″ height=”675″ src=”http://www.youtube.com/embed/S1i5coU-0_Q” frameborder=”0″ allowfullscreen></iframe> </div>
[/code]
Now your Youtube video iframe will be adaptive and will show correctly on all devices.
Leave a Reply
Want to join the discussion?Feel free to contribute!