YouTube Responsive Containers for WordPress

I always forget this so I’m linking this here.

.youtube-responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}

.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

And enclose the YouTube video’s iframe in a div of the above named class:

<div class="youtube-responsive-container"><iframe ...></iframe></div>

To make this work only on mobile enclose it in a media breakpoint instead:

@media only screen and (max-width: 768px){
.youtube-responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}

.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
}

And that sort of works for me sometimes and not … so I’ll come back to this one day. —JM

Leave a Reply