クリックイベントで埋め込み動画を変更する方法【jQuery】

「クリックした時に埋め込み動画を変更したい」こんなマニアックなニーズに答えます。

jQueryを使えば簡単にできます、プログラミングを勉強している方やjQueryを学ぼうとしている方は参考にどうぞ。

「クリックした時に埋め込み動画を変更したい」、そもそもこんな時あるのかって？

私は実務でありました、正確には動画ではありませんがtheta360を埋め込む際になんやかんやで、結構応用ききます。

つまり何がしたいかというと。

ボタンをクリックしたらiframeのsrc先を変更する、こういうことです。

百聞は一見に如かず、実際にみていきましょう。

aタグを利用して埋め込み動画を変更する方法【簡単実装】

今回はaタグを利用して実装していきます。

完成形はこんな感じ、動画A,動画Bをそれぞれクリックすると動画が変わるようになってます。

動画A 動画B

3ステップでOK。

aタグを用意しhrefに動画のidを設定する
動画を埋め込む
jQueryで処理

それぞれ解説していきます。

aタグを用意しhrefに動画のidを設定する

まず動画変更の際に使うボタンをaタグで用意しましょう。

<a class="moviechange" href="0g2QN5JItKI">動画A</a>
<a class="moviechange" href="ToCwTzooJZU">動画B</a>

ポイントはhrefの部分、ここに埋め込み動画のidを指定します。

idは埋め込みコードにありますのでそれをコピペしましょう、https://www.youtube.com/embed/ここに記述されているのがid。

動画を埋め込む

これはそのままですね、埋め込みコードをコピペしておくだけでOKです。

この埋め込みコードを元に動画の表示や変更を行います。

jQueryで処理

ここが肝になります。

wordpress環境でjqueryを記述する場合はラップする必要があるので気をつけましょう、詳細については下記を参考にどうぞ。

WordPressでjQueryが動かない時【簡単に解決】

それでは完成コードをみていきます。

$(".moviechange").click(function(){
  var id = $(this).attr('href');
  $(".iframe").attr("src","https://www.youtube.com/embed/" + id );
  return false;
});

先ほど用意したaタグにクリックイベントをつけます、ポイントは以下になります。

2行目、クリックしたaタグのhref値をidに格納
３行目、埋め込みコード（iframe）のsrcを先ほど取得したidを使って再生成したものと置き換え
４行目、aタグのリンク処理を中断（こうしないとページエラーが出てしまいます）

以上になります、簡単ですね。

お試しあれ。

終わりに

aタグのhrefはリンク先だけでなく値を保持する事にも使えることがわかります、色々と応用がきくので便利ですよ。

jQueryって便利だなって思う瞬間の一つではないでしょうか？

他にも方法はありますが今回はaタグを使ったクリックイベント処理を解説してみました。

以上になります。

Twitterでも情報や経過を発信していますのでフォローよろしくお願いします。

不明点やアドバイスなどありましたら、コメントかTwitterからお願いします。