youtube埋め込み型　ローディング中にくるくるアイコンの表示

htmlに埋め込み型のyoutubeを表示させる場合、ローディングが完了して表示されるまでくるくるした(ローディング中と認識できる)ものを表示させたいのですが。

方法としてはくるくるGIFを配置してローディングが完了しましたら、display:noneなどで切り替えるのが方法としてあるかとはおもいますが、他に実装方法がありましたらアドバイス、頂けたらと思っております。

<div class="movie">
<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>

          function youtube_defer() {
            var iframes = document.querySelectorAll('.youtube');
            iframes.forEach(function(iframe){
              if(iframe.getAttribute('data-src')) {
                iframe.setAttribute('src',iframe.getAttribute('data-src'));
              }
            });
          }
          window.addEventListener('load', youtube_defer);

現在上記のように埋め込みをしていまして、htmlの読み込みが完了後にyoutubeの読み込みをするようにしております。