jQuery Plugin To Embed Vimeo Videos with Thumbnails - Smart Vimeo Embed

Smart Vimeo Embed is a jQuery plugin that makes it easy to embed the Vimeo videos with thumbnails on your website, just by adding their id to the data-vimeo-id attribute.

How to use it:

1. Insert a placeholder image with a data-vimeo-id attribute containing the Vimeo ID. The placeholder image will automatically retrieve the video thumbnail, and auto plays video when it is clicked.

<img src="http://placehold.it/640x360" class="video-thumb" data-vimeo-id="46145750" />

2. The CSS for play icon overlay.

.vimeo-wrapper {
display: inline-block;
position: relative;
cursor: pointer;
}
.vimeo-wrapper .play-icon {
position: absolute;
z-index: 1000;
content: '';
display: block;
width: 100%;
height: 100%;
background: url(../img/icon-play.png) no-repeat center center;
}

3. Load the jQuery javascript library and jQuery Smart Vimeo Embed plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery-smartvimeoembed.min.js"></script> 

4. Call the plugin with options.

<script>
$(document).ready(function(){
$('.video-thumb').smartVimeoEmbed({
idSelectorName: 'vimeo-id',
autoplay: true,
width: 640,
onComplete: function(){},
onError: function(){}
});
});
</script> 

---

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