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