YouTube Player APIによる同一ページ内の複数動画再生

jQuery web制作 YouTube Player API アプリケーション別 プログラミング

広報:齊藤 メイ 広報:齊藤 メイ

Posted on 2018年01月05日(金)08:51
Updated on 2018年02月01日(木)15:37


YouTube Player APIによる同一ページ内の複数動画再生

Youtubeの動画再生にも一手間かけることもある、というお話です。?本日は「YouTube Player APIによる同一ページ内の複数動画再生」についてです。

こんにちは。猫ITソリューションズ広報の齊藤メイ(♀)です。本日は、「YouTube Player APIによる同一ページ内の複数動画再生」についてです。

Youtube動画をウェブページ内で再生させる方法としては、本家サイトから再生用htmlタグを取得するのが一般的です。ブログなどで2~3個表示させる場合はそれで問題ありません。しかし世の中一般常識が通用しない世界もあるのです。てゆーかそういう仕事だったのです。

要件と仕様

相変わらず生々しい内容ですが気にしないでください。

要件

  • 1ページに載せるYoutube動画が10~20と多い。
  • 動画は割と頻繁に(非開発者が)更新しなくてはいけない。
  • 他にも色々やりたいことがある。

仕様

再生用htmlタグをイチイチ取得して張り付けるのは手間なので、YouTube Player APIで動画を制御することにしました。他にも色々やりたいことって何ですか的なところの対策がメインですが。

YouTube Player APIについてはこちらをご覧ください。なお今回はiframe APIを使用しています。
iframe 組み込みの YouTube Player API リファレンス  |  YouTube IFrame Player API

サンプル

サンプルに必要なソースはhtmlとJavaScriptです。今回Youtube Player APIを含めライブラリ系は全てCDNで外部から読み込んでいます。

html

htmlは以下になります。かなり抜粋していますのでご注意ください。なおjQueryのCDNはここで確認→コピペしてください。
jQuery CDN

JavaScript

JavaScriptは以下です。動画再生サイズなどの数値は適時皆さんの希望で置き換えてください。

以上です。
ちなみにこの時、代表齊藤はしばらく後出しジャンケン的に決まっていく「他にも色々やりたいこと」の序章に過ぎないことを知りませんでした。


いかがでしたでしょうか?
猫ITソリューションズは、飼い主の皆さんにITを活用しあらゆるシーンで的確なアドバイスをいたします。それではまたお会いしましょう。

YouTube Player APIによる同一ページ内の複数動画再生

see you!

 

本件に関するお問い合わせ先

猫ITソリューションズ

049-290-8502
お問い合わせフォーム

※電話に出れない場合が多々ありましてご迷惑おかけします。その際は伝言、またはお問い合わせフォームをご利用ください。



Member Profile

広報:齊藤 メイ

埼玉在住の三毛猫です。趣味は日向ぼっこ、好きな猫缶はカツオ系です。仲良くしてくださいね!

Facebook
Twitter

代表:齊藤 智宏

埼玉在住のWebデベロッパーです。80's洋楽、映画、レトロゲームが大好きです。よろしく!

Facebook
Twitter

Contact

ご意見、ご相談などお気軽にお問い合わせ下さい。お問い合わせ内容の確認後、担当者よりご連絡させていただきます。

049-290-8502
お問い合わせフォーム

※電話に出れない場合が多々ありましてご迷惑おかけします。その際は伝言、またはお問い合わせフォームをご利用ください。