Have you ever be annoyed by videos not fitting well in the website on mobile/tablet, not respecting the 16:9 ratio or overflowing the browser window?
Here is FitVid.JS (by Dave Rupert)! This plugin is a lightweight, easy-to-use jQuery plugin for fluid width video embeds. It makes you life simpler, it manages itself the responsive for your videos.
Download the JS file on Dave’s GitHub page and pu the following code on your page.
// Target your .container, .wrapper, .post, etc.
Your videos will always be 100% width, and with the good ratio (the ratio that you put in the width/height attributes, see CASE 2). If you don’t put any width/height in the attributes, the video will look weird and you’ll two black stripes appearing (see CASE 1).
<!-- CASE 1 -->
<iframe src="https://player.vimeo.com/video/28523422" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<!-- CASE 2 -->
<iframe src="https://player.vimeo.com/video/28523422" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
The presentation video by Dave Rupert