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

Question

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の読み込みをするようにしております。