wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

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

      2020/10/28

こんにちは、管理人@SS_mshpです。

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

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

コードと解説

とりあえず、他人のサイトを勝手に表示させるのもアレなので、管理人がいつも使っている、著作権フリー曲サイト用youtubeアカウントから4つ選んで、それをボタンで切り替えて表示してみます。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が表示できない&ボタンも動かない)。

各種参考リンク

あとがき・まとめ

  • イベントハンドラonClickとopenメソッドで、複数のページをiframeで切り替えることができる
  • iframeのnameと、window.openパラメータのwindowNameは合わせておく
  • youtubeでやるときは、動画url形式に注意

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

◆この記事で問い合わせ

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。
『サイトを既にお持ちで、リニューアル』の場合は、¥10万以下でご対応します(月額管理費/24回支払い縛りなどの強制無し)。

【カテゴリ】 - javascript/jQuery, webメディア制作運用
【タグ】 -

  関連記事

【WPプラグイン】Smart Custom FieldsとCustom Field Bulk Editorは相性悪い?(空リンク・真偽値フィールドに文字)

今回は、管理人がカスタムフィールド系の案件で使っているプラグイン ...

【WordPress条件分岐】is_singleとis_singularって違うの?→idやスラッグ指定、投稿タイプ指定の面で違いが

今回は、WPの条件分岐などに使うファンクションで、名前が超似てい ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【WordPressカスタムフィールド検索】meta_queryで、シリアライズ値が入ったフィールドを持つ記事をヒットさせるには?

今回は、ちょっと需要があるかもしれない『WordPressカスタ ...

WP管理・投稿画面カスタマイズ~『p』『h2』みたいなタグ・定型文をボタン1つで記事に追加したい

今回は、以前サイト制作のお取引先さまと話した、WPの記事を投稿す ...

【WPプラグイン無し】3行のコードで、ブロックエディタ&ブロックライブラリCSSを無効にする方法

今回は、管理人が『お取引先さまのwebサイトでブロックエディタま ...