Ressources

FitVids.js – easy way to embed full width videos

11th December 2016

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.

Installation

Download the JS file on Dave’s GitHub page and pu the following code on your page.


<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

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>

example_with_and_without_width_height_attributes

The presentation video by Dave Rupert

About the author

Bastien Delmare - Freelance Digital Designer
http://bastiendelmare.com

I'm a digital mercenary. During the last years I've been walking around the digital area, still learning everyday, this domain is an infinite source of inspiration who makes my days. Today as a freelancer I'm trying to take every project as a challenge because new knowledges, new technologies or innovative ideas are often required!