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

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=”” frameborder=”0″ allowfullscreen></iframe> </div>


Now your Youtube video iframe will be adaptive and will show correctly on all devices.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

2023 © Copyright -