本記事の概要

初投稿になります！
本記事は、ポートフォリオにyoutube動画を組み込んだ時におきた問題についての記事になります。

問題点

ポートフォリオにyoutube動画を大量に組み込んだ際に、下記問題点が起こりました。

埋め込みyoutubeの動画の含まれるHTMLの読み込みと表示が非常に遅い
リクエストが途中で途切れる・一瞬で遮断される
コンソールでエラーがまれに発生する

埋め込みタグのコードは下記になります。

<div class="youtube">
  <iframe src="https://www.youtube.com/embed/<%= @video_id %>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

htmlにyoutubeの動画を埋め込む際にiframeタグを使うことになります。
youtubeの公式リファレンス

しかし、iframeタグを用いるとhtmlのレンダリングを行う際、全体のページを読み込んだ後に、iframeタグ（動画）の読み込むを行うようです。
作成したポートフォリオでは、大量のyoutube動画の読み込みをする必要があったので、見事に、問題に直面しました。

改善策

<div class="youtube">
  <iframe data-src="https://www.youtube.com/embed/<%= @video_id %>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

まずiframeタグのsrc属性でyoutubeURLを読み込んでおりましたが、data-src属性にすることで、htmlのレンダリングで、読み込むをすることなく、JavaScriptコードやCSSで使用できる追加データを格納することができます。

つまり、iframeタグ内の属性の読み込みをスルーするかつ、データは、一旦避難しておくことでHTMLの読み込みと表示が、スムーズにいくということです。（間違っていたらご指摘ください）

次にJavaScript（jQuery）の記述です。

$(function(){
  $('.youtube').each(function() {
    let iframe = $(this).children('iframe');
    let url = iframe.attr('data-src');
    let id = url.match(/[\/?=]([a-zA-Z0-9_-]{11})[&\?]?/)[1];
    iframe.before('<img src="http://img.youtube.com/vi/'+id+'/mqdefault.jpg" />').remove();
    $(this).on('click', function() {
      $(this).after('<div class="youtube"><iframe src="https://www.youtube.com/embed/'+id+'" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>').remove();
    });
  });
});

こちらでは、data-src属性で格納したyoutubeURLを、src属性に置き換える動作を加えています。　
5・6行目の記述が重要です。
５行目では、変数idに、youtubeURLに含まれるvideo_id（動画情報）を正規表現とmatchメソッドを使って、引っ張り出しています。
６行目では、取得した動画情報を変数idとして、imgタグに代入します。ここでbeforeメソッドでiframeタグに表示されるのは、youtubeのサムネイル画像になります。　
HTMLで動画を読みこむ代わりに、動画のサムネイルをとりあえず表示することになります。

サムネイル画像をクリックアクションで、再度iframeタグを読み込み、負荷なくレンダリングがスムーズに行われました。

ポートフォリオの一部例です。
当初、HTMLの読み込みに30秒〜１分ほどかかる時もありましたが、数秒程度に改善されました。

ポートフォリオサイト

参考になりますと幸いです。
以上になります！

ポートフォリオにiframeタグでyoutubeの動画を組み込むときのすゝめ

本記事の概要

問題点

改善策