jQuery Plugin For Custom Vimeo Cover Placeholder - vimeo-cover.js

File Size: 5.96 KB
Views Total: 1295
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Custom Vimeo Cover Placeholder - vimeo-cover.js

vimeo-cover.js is a lightweight jQuery plugin that helps embed a Vimeo video with custom cover image into your webpage. Only when the cover is clicked does it fetch the iframe Vimeo player.

How to use it:

1. Place jQuery library and the jQuery vimeo-cover.js into the html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="lib/class.min.js"></script>
<script src="jquery-vimeo-cover.js"></script>

2. Embed a specific Vimeo video into the webpage using vimeo-id attribute and assign a cover image using vimeo-placeholder attribute.

<div class="vimeo-cover" 
     vimeo-id="77091919" 
     vimeo-placeholder="cover.jpg">
</div>

3. Create a new Vimeo Cover instance.

new VimeoCover($('.vimeo-cover'));

// or multiple instances on the same page
$('.vimeo-cover').each(function(index, el) {
  $vimeoCover = new VimeoCover(el);
});

4. Change the default selector on initialize.

new VimeoCover($('.vimeo-cover'), {
    selector: '.vimeo-cover'
});

This awesome jQuery plugin is developed by incraigulous. For more Advanced Usages, please check the demo page or visit the official website.