Developer // Embedding Videos Responsively

Having to add embedding Vimeo videos support to a WordPress backend I came across the inevitable “how to handle mobile” issue.

After a quick search I found this lifesaver of a website – Which very simply generates responsive embed code for a host of different media sources, including Vimeo, YouTube, Dailymotion and Instagram.

Firstly some CSS…

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;</style> }

After this it adds the standard iframe embed code within the container class…

<div class="embed-container"><iframe src="" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

Definitely worth bookmarking for future reference.

Leave a Reply

Your email address will not be published. Required fields are marked *