延迟加载youtube视频1单击加载并播放

时间:2019-10-10 10:09:56

标签: javascript youtube youtube-api

我正在使用此代码,并且可以完美地使用图像来延迟加载YT视频:

( 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&enablejsapi=1" );

          this.innerHTML = "";
          this.appendChild( iframe );
    } );  
};

} )();

但是,要求2单击1加载视频,然后单击1播放视频以正常工作。只需单击一下,我有什么方法可以使用相同的代码来播放YouTube视频?

是否可以使其与Vimeo视频一起使用?

谢谢!

1 个答案:

答案 0 :(得分:0)

iframe.setAttribute(“ allow”,“ autoplay”);