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 – embedresponsively.com. 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="http://player.vimeo.com/video/66140585" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
Definitely worth bookmarking for future reference.