Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?



Find us on Facebook

Follow us on Twitter

View our YouTube channel


 All Forums
 Technical
 Advanced Tips and Tricks - NO QUESTIONS PLEASE
 Lazyload YouTube Video
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

Marshall
Ecommerce Template Guru

USA
1426 Posts

Posted - 08/18/2018 :  19:00:47  
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 (320180 pixels)
var source = http://img.youtube.com/vi/G0wGs3useV8/hqdefault.jpg // Use for High Quality thumbnail most common (480360 pixels)
//var source = http://img.youtube.com/vi/G0wGs3useV8/sddefault.jpg // Use for Standard Definition (SD) (640480 pixels)
//var source = http://img.youtube.com/vi/G0wGs3useV8/maxresdefault.jpg // Use for Maximum Resolution least common (19201080 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.

Marshall
CENLYT Productions - ms designs
Affordable Web Design
Custom Ecommerce Designs
Responsive Websites
Cenlyt.com
   Topic   
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2019 ecommercetemplates.com
This page was generated in 0.02 seconds. Snitz Forums 2000