Imagine you want to emphasize on your website a wonderful video. Just plain enough, right? The picture is half of your audience on their phones, the rest tapping away on laptops, iPads, TVs. To make your embedded videos flexible (and save yourself a support headache down the road), you need to generate responsive embed code. On every screen, not only that obsolete desktop monitor from 2005, your movie should appear sharp.
What follows is the secret sauce. Vanilla embed code like the old school. Reproduct this HTML layout into your own work.
<div style=”position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;”>
<iframe src=”https://www.youtube.com/embed/VideoID”
style=”position: absolute; top: 0; left: 0; width: 100%; height: 100%;”
frameborder=”0″ allowfullscreen>
</iframe>
</div>
That sharp 56.25% padding is simple maths. Nine divided by sixteen keeps its 16:9 aspect ratio constant; who knew your geometry class would come back to help you now? The iframe allows the container shrink or grow with the screen to exactly occupy all available space.
Sheets of Cascading Styles Save the day if you enjoy your HTML cleanliness. Just toss these styles into your CSS file.
.responsive-video {position: relative; padding-bottom: 56.25%;height: 0; overflow: hidden; max-width: 100%;}
.responsive-video iframe,
.responsive-video object,
.responsive-video embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
Not overly concerned; this approach works with practically any modern video provider, YouTube, Vimeo, Dailymotion. Even HTML5 video tags act with a similar shell. Try your site on a phone, on a big screen, or confined into a tiny browser window. Every time your video maintains perfect form. Magic is hardly at all; it’s just a bit of internet information mixed with some mathematical magic.
Recall: you adjust the aspect ratio from 16:9 to, say, 4:3. Change the bottom padding wise to 75%. For vertical videos the TikHub vibe try padding bottom: 177.77% for 9:16. Once embedded code was “set it and forget it.” These days you need codes that dance and bend. Try this flexible strategy; depending on the gadget you see, your movie will never look awkward once more!
