Autoplay YouTube LazyLoad Embed Video on Desktop?

Question

I have many YouTube LazyLoad Videos on one page and I want to autostart one of the Videos on Page Load when visiting the site on a desktop but when visiting the site on a mobile phone I want to keep the lazyload image to not slow down the website for mobile visitors because a YouTube iframe has to download some files which can slow down a website to display the video. I already have a script that does the LazyLoad ready here http://jsfiddle.net/the_nexi/5qzaq59n/10/ but I can't figure out how I could add let's say a data type to the script in javascript to load one video automatically on page load on a desktop and the other YouTube Lazyload Videos should stay as lazyload until you click on them and on the phone I want to have all videos to stay as lazyload even the video that should autostart on page load on a desktop. To not slow down the site because a normal youtube iframe really slows down the site on a phone hope someone can help me, please.

credit I got the original code from this post https://webdesign.tutsplus.com/tutorials/how-to-lazy-load-embedded-youtube-videos--cms-26743

Thanks in advance.

Nexi

( function() {

 var youtube = document.querySelectorAll( ".youtube" );
 
 for (var i = 0; i < youtube.length; i++) {
  
  var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
  
  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 );
    } ); 
 };
 
} )();

html {
 background-color: #f3f3f3;
  font-family: sans-serif;
}
.wrapper {
 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: -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%;
 -webkit-transform: translate3d( -50%, -50%, 0 );
         transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
 height: 100%;
 width: 100%;
 top: 0;
 left: 0;
}

 
  I want this video to start automatically on page load on a desktop and on a mobile phone I want it to stay as lazyload like in this demo.
 
  
 
  But I want the other YT Lazy Load YOUTUBE Videos to stay as Lazy Load until I click the Play Button.

user_4965216 · Answer

Declare your click event first, then when you loop through the images you can test for first image & viewport width and fire a click event if relevant, something like this:

image.addEventListener( "load", function() {
  youtube[ i ].appendChild( image );
  if(i === 0 && window.innerWidth > 740) {
    youtube[ i ].click();
  }
}( i ) );

Here's a working fiddle (try making the preview pane wider/narrower than 740px and hitting run, on the narrow screen the video should lazyload as an image, on the wider it should autoplay).

Autoplay YouTube LazyLoad Embed Video on Desktop?

1 Answers