JAVAアプリの埋め込みYOUTUBE動画が重いときの対応法

JAVAアプリの埋め込みYOUTUBE動画が重いときの対応法

JAVAアプリでYOUTUBEを埋め込んだ場合、サイトを表示するのに時間がかかります。
表示に時間がかかるとSEOとしても問題があります。
この問題を解決する方法について解説します。

埋め込み動画の対応法について

一番簡単な方法として、画像として表示し、javascriptでクリックしたときに
動画に変換する方法です。

初期表示では、画像のため、読み込み時間等が短縮されます。

javascriptのコードについて

javascriptを使って、クリックしたときに動画に変換するコードは、下記のとおりです。

$('.video img').click(function(){
	video = '<iframe src="'+ $(this).parent().attr('youtube') +'" frameborder="0" allow="accelerometer; autoplay=1; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="width:300px;"></iframe>';
	$(this).parent().parent().replaceWith(video);
});

細かく分解して解説していきます。

①videoクラスのimgタグがクリックされた時という意味です。

$('.video img').click

②変数videoに値を代入します。

frameborder ~ style = “width:300px;”までは、オプションとなりますので、
気にしなくても問題ないです。

ここで重要なのは、「$(this).parent().attr(‘youtube’)」の部分です。
thisは、クリックされた箇所を指しますので、クリックされた箇所の親のyoutube属性を取得した値という意味です。

video = '<iframe src="'+ $(this).parent().attr('youtube') +'" frameborder="0" allow="accelerometer; autoplay=1; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="width:300px;"></iframe>';

③thisは、クリックされた箇所を指しますので、クリックされた箇所の親の親を先ほどの変数videoと置換するという意味です。

$(this).parent().parent().replaceWith(video);

まとめ

javascript

video = '<iframe src="'+ $(this).parent().attr('youtube') +'" frameborder="0" allow="accelerometer; autoplay=1; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="width:300px;"></iframe>';

jsp

<div class="videoBox">
 <div class="video" youtube="https://www.youtube.com/embed/wkoxxYA2U0M?rel=0&amp;showinfo=0&amp;autoplay=1">
  <img src="https://img.youtube.com/vi/wkoxxYA2U0M/hqdefault.jpg" alt="動画" style="width:300px; height:150px" />
 </div>
</div>

先ほど解説したjavascriptを実際のjspに当てはめて解説すると、thisは、<div class=”video”>内の<img>タグとなります。

①<div class=”video”>内の画像がクリックされた時
②videoに値を代入

video = '<iframe src="'+ https://www.youtube.com/embed/wkoxxYA2U0M?rel=0&amp;showinfo=0&amp;autoplay=1 +'" frameborder="0" allow="accelerometer; autoplay=1; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="width:300px;"></iframe>';

③thisの親の親なので、<div class=”videoBox”>ないすべてが②の変数videoと入れ替わることになります。

以上が、埋め込み動画が重い場合の対応方法となります。