ポートフォリオにiframeタグでyoutubeの動画を組み込むときのすゝめ
本記事の概要
初投稿になります!
本記事は、ポートフォリオに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行目の記述が重要です。
5行目では、変数idに、youtubeURLに含まれるvideo_id(動画情報)を正規表現とmatchメソッドを使って、引っ張り出しています。
6行目では、取得した動画情報を変数idとして、imgタグに代入します。ここでbeforeメソッドでiframeタグに表示されるのは、youtubeのサムネイル画像になります。
HTMLで動画を読みこむ代わりに、動画のサムネイルをとりあえず表示することになります。
サムネイル画像をクリックアクションで、再度iframeタグを読み込み、負荷なくレンダリングがスムーズに行われました。
ポートフォリオの一部例です。
当初、HTMLの読み込みに30秒〜1分ほどかかる時もありましたが、数秒程度に改善されました。
参考になりますと幸いです。
以上になります!
Author And Source
この問題について(ポートフォリオにiframeタグでyoutubeの動画を組み込むときのすゝめ), 我々は、より多くの情報をここで見つけました https://qiita.com/ponsata/items/c25b9846d4975de85f34著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .