<h1>Use this player to save page load time with Vimeo Videos.</h1>
<!-- Use the code below to place the lazy load player on your site. Replace the ID with your Vimeo ID.  -->
<div class="vim-lazy" id="87110435"></div>
<div class="space"></div>
<div class="col-md-6"><div class="vim-lazy two-across" id="87110435"></div></div>
<div class="col-md-6"><div class="vim-lazy two-across" id="87110435"></div></div>
<div class="clearfix"></div>
<div class="space"></div>
<div class="col-md-4"><div class="vim-lazy three-across" id="87110435"></div></div>
<div class="col-md-4"><div class="vim-lazy three-across" id="87110435"></div></div>
<div class="col-md-4"><div class="vim-lazy three-across" id="87110435"></div></div>
<div class="clearfix"></div>  
<!--Want the codes without Bootstrap? Here You Go. 

Large Player 600px on desktop
<div class="vim-lazy" id="87110435"></div>

1/2 Page Player
<div class="vim-lazy two-across" id="87110435"></div>

1/3 Page Player
<div class="vim-lazy three-across" id="87110435"></div>
-->
	.vim-lazy {
    width: 600px;
    height: 320px;
		margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) and (max-width: 1024px) {
  
	.vim-lazy {
    width: 430px;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
}
  
}
	@media (min-width: 320px) and (max-width: 480px) {
  
.vim-lazy {
    width: 321px;
    height: 170px;
    margin-left: auto;
    margin-right: auto;
}
  
}
.desktop-smaller {
    width: 465px;
    height: 279px;
}
.two-across {
    width: 465px;
    height: 279px;
}
.three-across {
    width: 350px;
    height: 195px;
}

/* Remaining CSS for page layout only not needed for adding the script to your site. */
.clearfix {clear:both;}
.space {height:50px;}
h1 {text-align:center; margin-top:20px; margin-bottom:20px; font-size:40px;}
jQuery(document).ready(function() {
  jQuery(".vim-lazy").each(function() {
    var idd= jQuery(this).attr("id");
    jQuery(this).html("<iframe src='https://player.vimeo.com/video/" + idd + "' frameborder='0' allow='autoplay; fullscreen' allowfullscreen width='100%' height='100%'></iframe>");
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.