<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>");
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.