jQuery Plugin To Embed Vimeo Videos with Thumbnails - Smart Vimeo Embed
File Size: | 8.21KB |
---|---|
Views Total: | 5041 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.