イベントハンドラonClickとopenメソッドで、複数youtube動画をボタンで切り替え、iframe内に表示する方法

今回は管理人が、お取引先のサイトにつけようとしたけど、より便利な方法が思いついてしまったので、没になったアイデアを紹介します（別ケースではガンガン使えることもあるかもしれません。）。『そういやyoutubeってiframeで呼び出してたよな』というところから思いついた、『イベントハンドラonClickとopenメソッドで、複数youtube動画をボタンで切り替え』機能です。さっそくコードや表示例を確認していきましょう。

onClickとopenメソッドで、複数youtube動画をボタンで切り替え、iframe内に表示する方法

コードと解説

とりあえず、他人のサイトを勝手に表示させるのもアレなので、管理人がいつも使っている、著作権フリー曲サイト用youtubeアカウントから４つ選んで、それをボタンで切り替えて表示してみます。CSSはボタンをくくって横一列にならべる(display:inline;)のと、改行が勝手に入ってきたので消す(br {display:none; })ために指定しています。

iframe srcを指定する場合は、初期値として最初に表示させておきたいurlを書きます。ボタンのwindow.openのパラメーターは、切り替えて表示したいurlと、windowName（iframeのnameと合わせておく。ここではyb_subwindow。）。

あと、注意点として、youtubeで行う場合は『youtubeの読み込みタイプはurl形式が異なる（youtube.com/embed/～）』という点も押さえておきましょう。『watch?v=〇〇』みたいな形式でやってみたら読み込めませんでした。

表示例

先ほどのコードをそのままこのサイトに貼ると、こういう感じになります。ボタンを押して動画を切り替えてみてください。

ただし、ブラウザでJavaScriptを無効にしていると動かないので注意してください（JavaScript無効だと、そもそもyoutubeが表示できない＆ボタンも動かない）。

各種参考リンク

■JavaScriptのonclickの使い方を現役エンジニアが解説（techacademy）
https://techacademy.jp/magazine/26864

■ウィンドウ名.open() …… 新しいウィンドウを開く（JavaScriptリファレンス ）
http://www.htmq.com/js/window_open.shtml

■click イベント（Web API | MDN）
https://developer.mozilla.org/ja/docs/Web/API/Element/click_event

あとがき・まとめ

まとめるとこんな感じでしょうか。動画を複数貼りたいけど、スペース的に一か所でおさめたいとき、個別にページを作るまでもないけど、ボタンで切り替えたいコンテンツがあるときなどは便利だと思います。