YouTube videos are great for product sales, demons and FYIs. But an embedded YouTube video can add 1mb or more to your page. Here is a simple method to have the video load on demand rather than on page load.
This technique generates a thumbnail of the video which, when clicked, then loads the video. An example can be seen here maskus.com/videos.asp.
The CSS
.YouTubeWrapper {max-width:680px;margin:60px auto;padding:0 20px;}
.youtube {background-color:#000;margin-bottom:30px;position:relative;padding-top:56.25%;overflow:hidden;cursor:pointer;}
.youtube img {width:100%;top:0/*-16.82%*/;left:0;opacity:0.7;}
.youtube .play-button {width:90px;height:60px;background-color:#333;box-shadow:0 0 30px rgba( 0,0,0,0.6 );z-index:1;opacity:0.8;border-radius:6px;}
.youtube .play-button:before {content:"";border-style:solid;border-width:15px 0 15px 26.0px;border-color:transparent transparent transparent #fff;}
.youtube img,.youtube .play-button {cursor:pointer;}
.youtube img,.youtube iframe,.youtube .play-button,.youtube .play-button:before {position:absolute;}
.youtube .play-button,.youtube .play-button:before {top:50%;left:50%;transform:translate3d( -50%, -50%, 0 );}
.youtube iframe {height:100%;width:100%;top:0;left:0;}
.YouTubeWrapper can be replaced with anything you want or fits the method with which you built the site.
The HTML
<div class="YouTubeWrapper">
<div class="youtube" data-embed="VIDEOIDNUMBER">
<div class="play-button"></div>
</div>
</div>
The VIDEOIDNUMBER is the number you will find in the embed code.
You can also substitute the .YouTubeWrapper division with one that fits the coding of you website build such as Bootstrap, e.g.
<div class="embed-responsive embed-responsive-16by9">
<div class="youtube" data-embed="VIDEOIDNUMBER">
<div class="play-button"></div>
</div>
</div>
And the JAVASCRIPT
<script type="text/javascript">
(function() {
var youtube = document.querySelectorAll( ".youtube" );
for (var i = 0; i < youtube.length; i++) {
//var source = http://img.youtube.com/vi/{video-id}/mqdefault.jpg // Use for Medium Quality thumbnail (320×180 pixels)
var source = http://img.youtube.com/vi/G0wGs3useV8/hqdefault.jpg // Use for High Quality thumbnail most common (480×360 pixels)
//var source = http://img.youtube.com/vi/G0wGs3useV8/sddefault.jpg // Use for Standard Definition (SD) (640×480 pixels)
//var source = http://img.youtube.com/vi/G0wGs3useV8/maxresdefault.jpg // Use for Maximum Resolution least common (1920×1080 pixels)
var image = new Image();
image.src = source;
image.addEventListener( "load", function() {
youtube[ i ].appendChild( image );
}( i ) );
youtube[i].addEventListener( "click", function() {
var iframe = document.createElement( "iframe" );
iframe.setAttribute( "frameborder", "0" );
iframe.setAttribute( "allowfullscreen", "" );
iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
this.innerHTML = "";
this.appendChild( iframe );
} );
};
} )();
</script>
Depending on the video will depend on the available thumbnail. In this example, the most common is activated, but you can experiment by commenting it out and trying a different one.
The script will allow for as many videos per page as you want, so you will have to use a thumbnail size common to all the videos you have.
One of the great features of this is you can place the CSS and JavaScript in say your proddetail.asp/php page then place the short HTML code in your product description or one of the extra fields.
MarshallCENLYT Productions - ms designs
Affordable Web Design
Custom Ecommerce Designs
Responsive Websites
Cenlyt.com
Lazyload YouTube Video
Posted - 08/18/2018 : 19:00:47
