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

File Size: 8.21KB
Views Total: 5071
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

idSelectorName: 'vimeo-id',
autoplay: true,
width: 640,
onComplete: function(){},
onError: function(){}

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