htmlに埋め込み型のyoutubeを表示させる場合、ローディングが完了して表示されるまでくるくるした(ローディング中と認識できる)ものを表示させたいのですが。
方法としてはくるくるGIFを配置してローディングが完了しましたら、display:noneなどで切り替えるのが方法としてあるかとはおもいますが、他に実装方法がありましたらアドバイス、頂けたらと思っております。
html
1<div class="movie"> 2<iframe class="youtube" width="560" height="315" data-src="https://www.youtube.com/embed/youtubeのID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div>
javascript
1 function youtube_defer() { 2 var iframes = document.querySelectorAll('.youtube'); 3 iframes.forEach(function(iframe){ 4 if(iframe.getAttribute('data-src')) { 5 iframe.setAttribute('src',iframe.getAttribute('data-src')); 6 } 7 }); 8 } 9 window.addEventListener('load', youtube_defer);
現在上記のように埋め込みをしていまして、htmlの読み込みが完了後にyoutubeの読み込みをするようにしております。
あなたの回答
tips
プレビュー