クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

【はてなブログ】YouTubeの埋め込み動画を後から読み込ませる方法!クリックしたらiframeを実行する!

f:id:clrmemory:20180629162227p:plain

こんにちはクリアメモリです!

今回は、iframeを使ってはてなブログに埋め込んだ「YouTube」の動画を、任意のタイミングで読み込ませる方法について紹介します。

 

画像をクリックしたらYouTube動画を読み込むようにできるので、記事の表示スピードが遅くなる心配もなく、動画を設置できます。

設置した動画の数が多いときに便利なのでチェックしてみてください。

 

はじめに

 

今回紹介する内容は、はてなブログに設置した「YouTube動画」を、画像をクリックしたタイミングで読み込ませる方法についてです。

まずは以下の画像をチェックしてみてください。

 

 

この画像をクリックすると、予め設定しておいたYouTube動画が読み込まれるようになっています。

複数の動画を設定したり、CSSで作成した「ボックス」や「リンク」でも実装できるので、好みに合わせて試してみてください。

 

軽く解説

 

今回のカスタマイズは以下のような流れで行っていきます。

  • 設置したい動画の埋め込みコードを取得
  • 記事内にHTML・JavaScriptを記述
  • コード内のURLを書き換え

 

こんな感じ。

記事ごとに設定する必要があり、これまでにアップした記事はそれぞれ書き直す必要があるので注意してください。

 

それでは、実際のカスタマイズ方法をチェックしていきましょう。

 

埋め込み用のコードを追加

 

まずは、HTMLを使って「読み込み前の画像(要素)」を用意します。

今回は画像を使いましたが、CSSで見た目を調整した「ボックス」や「リンク」などでも大丈夫です。

 

要は、JavaScriptでクリックイベントを取得できればなんでもOK

 

ボックスの場合

クリックして動画を再生する

 

リンクの場合

クリックして動画を再生

 

こんな感じになります。

では、はてなブログの記事編集ページに、以下のような要素を追加しましょう。

<img class="mov" src="任意の画像.png">

 

画像の「src="~~.png"」と書かれた部分は「表示したい画像のURL」になっています。

今回の場合だとこちらですね。

f:id:clrmemory:20180629155858p:plain

 

クラス名は自由に設定できますが、次に紹介する「JavaScript」のコードと合わせないと動作しないので注意してください。

では続いて、記事の下の方に以下のコードを追加しましょう。

 

<script>

$(function (){
   var mov = new Array(
       "https://www.youtube.com/embed/cKNFIytzF4U?rel=0" 
   );
   $('.mov').each(function(index) {
       $(this).click(function (){
           $(this).after('<iframe width="480" height="270" src="'+mov[index]+'&autoplay=1" frameborder="0" allowfullscreen></iframe>').remove();
       });
   });
});

</script>

 

こちらのコードは「JavaScript」で記述されているので、記事の一番下とかに書いておくと、わかりやすくて良いと思います。

実際の記事内では表示されないので安心してください。

 

コード内の「" "」で囲まれた部分には、最初に取得した「埋め込みコード」の「src="~~?rel=0" 部分」を追加します。

今回の場合は「"https://www.youtube.com/embed/cKNFIytzF4U?rel=0"」が動画のソースとして用意されていました。

 

こんな感じで記述できたら、記事のプレビューをチェックしてみてください。

画像(要素)をクリックしたらYouTubeの埋め込み動画が読み込まれたと思います。

 

 

複数の動画をまとめて記述する

 

今回の方法は「埋め込みたい動画の数が多い時」に便利なカスタマイズです。

埋め込みコードさえ取得しておけば、JavaScriptのクリックイベントを取得する部分はまとめて記述できちゃいます。

 

複数動画の場合は以下のように記述しましょう。

 

<script>

$(function (){
   var mov = new Array(
       "動画AのURL?rel=0",
       "動画BのURL?rel=0",
       "動画CのURL?rel=0"
   );
   $('.mov').each(function(index) {
       $(this).click(function (){
           $(this).after('<iframe width="480" height="270" src="'+mov[index]+'&autoplay=1" frameborder="0" allowfullscreen></iframe>').remove();
       });
   });
});

</script>

 

先ほど記述したコードと比べると、動画のURLが増えていると思います。

カンマ( , )で動画のURLを区切っている点に注意して、コードを書き換えてください。

 

実際に表示してみると、このようになりました。

 

上の画像をクリックすると「上に書いた動画」が読み込まれ、下の画像をクリックすると「下に書いた動画」が読み込まれるようになっています。

同じようにして、URLの数を増やしていけば「3つ」「4つ」と、埋め込んだ動画の数にかかわらず、クリックしたタイミングで動画を読み込むようになりました。

 

これなら、埋め込み動画がいくつあってもページの表示速度は変わらないので、動画をたくさん設置したい時も安心ですね。

 

まとめ

 

今回紹介した方法を使うことで、はてなブログに埋め込んだ動画の数が多い場合でも、スムーズにページを表示できるようになりました。

1・2つぐらいではあまりわからないかもしれませんが、10・20と動画の数が多いときに便利なので、ぜひ活用してみてください。

 

www.clrmemory.com

 

ではまた。

新着記事