YouTube Player APIにより背景で動画を再生させる

jQuery web制作 YouTube Player API プログラミング

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

Posted on 2018年03月05日(月)13:16
Updated on 2018年02月01日(木)15:36


YouTube Player APIにより背景で動画を再生させる

Youtubeの動画再生にも一手間かけることもあるのですが、少しやっかいな話になってきた、というお話です。?本日は「YouTube Player APIにより背景で動画を再生させる」についてです。

こんにちは。猫ITソリューションズ広報の齊藤メイ(♀)です。本日は、「YouTube Player APIにより背景で動画を再生させる」についてです。

今回は以前紹介した、

更なる追加要件機能改良・完全版です。としては、要は本家サイトから再生用htmlタグで済ませるだけじゃあダメという場合にはYoutube Player APIで何とかしようと思い立ったらクライアントに「何でも出来る」と思われたらしく色々と追加要望が出されたというお話です。

要件と仕様

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

要件

  • 1ページに載せるYoutube動画が10~20と多い。
  • 動画は割と頻繁に(非開発者が)更新しなくてはいけない。
  • 他にも色々やりたいことがある。
  • 1ページで再生させる動画は一つだけ。既に再生していた動画はストップさせる。
  • [NEW!] ページ上部の背景いっぱいに動画を再生させる。

「ページ上部の背景いっぱい」という言い方でどういうものか分かるでしょうか?以下は「背景いっぱい」の例です。これを上部だけという感じです。
jQuery Youtube background video for your website | Pupunzi

※なおこの例は「背景いっぱい」だけをカンタンに実装するjQueryプラグイン「JQUERY.MB.YTPLAYER」のページです。

 

仕様

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は以下です。動画再生サイズや動画IDなどの値は、適時皆さんの環境に合わせて置き換えてください。


以上です。
色々と機能を実装したプログラムですが、案外私たちと同じWeb制作会社がLP(=ランディングページ。1ページで簡潔に全てを宣伝するページ)を作る際にはこのスクリプトを丸ごと使えば事足りるかもしれません。この記事が誰のためなのか意味不明ですいませんが、他の方のお役にも立てることを願います。


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

YouTube Player APIにより背景で動画を再生させる

see you!

 

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

猫ITソリューションズ

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



Member Profile

広報:齊藤 メイ

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

Facebook
Twitter

代表:齊藤 智宏

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

Facebook
Twitter

Contact

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

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