This jQuery plugin will prevent the vimeo player from loading until a video is started. This will speed up the loading of the page.
Usage:
Use jQuery. Load the plugin and add a vimeo class to any DIV and insert the video-id in a data-id attribute.
<div style="width:300px;height:200px" class="vimeo" data-id="72810842"> <noscript> <iframe src="https://player.vimeo.com/video/72810842" frameborder="0" webkitAllowFullScreen mozallowfullscreen autoPlay allowFullScreen></iframe> </noscript> </div>
Or use responsive version with bootstrap:
<div class="embed-responsive embed-responsive-16by9"> <div class="embed-responsive-item vimeo" data-id="72810842"> <noscript> <iframe src="https://player.vimeo.com/video/72810842" frameborder="0" webkitAllowFullScreen mozallowfullscreen autoPlay allowFullScreen></iframe> </noscript> </div> </div>
Add some javascript, the plugin requires a play button (80x80 pixels)
jQuery(document).ready(function()
{
jQuery( ".vimeo" ).lazyvimeo("/code/lazyvimeo/play.png");
});