was successfully added to your cart.

Simple Responsive YouTube Embeds, Pure JavaScript

By October 28, 2015blog, learn

This hack works for me on browsers that support document.innerWidth.

CSS


iframe {
display: block;
margin: 0 auto;
}

JavaScript

Shown in ES6 and React, neither of which is required. The 50% width encourages a smaller size where the thumbnail still appears. Aspect ratio and total width seem to be the factors that determine whether or not the thumbnail appears.

const aspect = 4/3;
<iframe> src="" width="50%" height="{Math.round(0.5*window.innerWidth/aspect)}" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>

Leave a Reply