自動再生YouTube LazyLoadビデオをデスクトップに埋め込みますか？

Question

私は1ページに多くのYouTube LazyLoad Videosを持っています。デスクトップ上のサイトにアクセスするときにページロード時に動画の1つを自動起動したいのですが、携帯電話でサイトを訪れているときにlazyload画像を遅くしないYouTubeのiframeは動画を表示するためにウェブサイトの速度を低下させるファイルをダウンロードする必要があるため、モバイルビジター向けのウェブサイトです。私はすでにLazyLoadを準備しているスクリプトを持っていますhttp://jsfiddle.net/the_nexi/5qzaq59n/10/しかし、私はどのように私はデスクトップと他のYouTubeのLazyloadビデオのページの負荷で自動的に1つのビデオを読み込むためにJavaScriptのスクリプトにデータ型を言うことを追加することができますあなたがそれらをクリックするまでlazyloadとしてとどまるべきであり、電話で私はすべてのビデオがデスクトップ上のページの読み込み時に自動的に開始されるべきビデオであってもlazyloadとして滞在したいと思っています。通常のyoutube iframeは本当に誰かが私を助けることができる願って電話のサイトを遅くするため、サイトを遅くしないでください。

クレジットは私が事前にこのポストからhttps://webdesign.tutsplus.com/tutorials/how-to-lazy-load-embedded-youtube-videos--cms-26743

おかげで元のコードを得ました。

NEXI

(function() { 
 

 
\t var youtube = document.querySelectorAll(".youtube"); 
 
\t 
 
\t for (var i = 0; i < youtube.length; i++) { 
 
\t \t 
 
\t \t var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg"; 
 
\t \t 
 
\t \t var image = new Image(); 
 
\t \t \t \t image.src = source; 
 
\t \t \t \t image.addEventListener("load", function() { 
 
\t \t \t \t \t youtube[ i ].appendChild(image); 
 
\t \t \t \t }(i)); 
 
\t \t 
 
\t \t \t \t youtube[i].addEventListener("click", function() { 
 

 
\t \t \t \t \t var iframe = document.createElement("iframe"); 
 

 
\t \t \t \t \t \t \t iframe.setAttribute("frameborder", "0"); 
 
\t \t \t \t \t \t \t iframe.setAttribute("allowfullscreen", ""); 
 
\t \t \t \t \t \t \t iframe.setAttribute("src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1"); 
 

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

html { 
 
\t background-color: #f3f3f3; 
 
    font-family: sans-serif; 
 
} 
 
.wrapper { 
 
\t max-width: 680px; 
 
\t margin: 60px auto; 
 
\t padding: 0 20px; 
 
} 
 

 
.youtube { 
 
\t background-color: #000; 
 
\t margin-bottom: 30px; 
 
\t position: relative; 
 
\t padding-top: 56.25%; 
 
\t overflow: hidden; 
 
\t cursor: pointer; 
 
} 
 
.youtube img { 
 
\t width: 100%; 
 
\t top: -16.82%; 
 
\t left: 0; 
 
\t opacity: 0.7; 
 
} 
 
.youtube .play-button { 
 
\t width: 90px; 
 
\t height: 60px; 
 
\t background-color: #333; 
 
\t box-shadow: 0 0 30px rgba(0,0,0,0.6); 
 
\t z-index: 1; 
 
\t opacity: 0.8; 
 
\t border-radius: 6px; 
 
} 
 
.youtube .play-button:before { 
 
\t content: ""; 
 
\t border-style: solid; 
 
\t border-width: 15px 0 15px 26.0px; 
 
\t border-color: transparent transparent transparent #fff; 
 
} 
 
.youtube img, 
 
.youtube .play-button { 
 
\t cursor: pointer; 
 
} 
 
.youtube img, 
 
.youtube iframe, 
 
.youtube .play-button, 
 
.youtube .play-button:before { 
 
\t position: absolute; 
 
} 
 
.youtube .play-button, 
 
.youtube .play-button:before { 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t -webkit-transform: translate3d(-50%, -50%, 0); 
 
\t   transform: translate3d(-50%, -50%, 0); 
 
} 
 
.youtube iframe { 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t top: 0; 
 
\t left: 0; 
 
}

<div class="wrapper"> 
 
    <p>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.</p> 
 
\t <div class="youtube" data-embed="4ckxTlaDJ7E"> 
 
\t \t <div class="play-button"></div> 
 
\t </div> 
 
    <p>But I want the other YT Lazy Load YOUTUBE Videos to stay as Lazy Load until I click the Play Button.</p> 
 
    \t <div class="youtube" data-embed="XBtPebpfVg4"> 
 
\t \t <div class="play-button"></div> 
 
\t </div> 
 
</div>

Answer 1

最初にあなたのクリックイベントを宣言し、その後、ときにあなたは、のようなものを最初の画像&ビューポートの幅をテストし、関連する場合は、クリックイベントを発生することができ、画像をループこの：

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

ここにはworking fiddleがありますプレビューペインは740ピクセルより幅が狭く/狭く、狭い画面では動画が画像として表示され、幅が広い場合は自動再生する必要があります）。