Youtubeの動画をオートプレイでミュート状態で埋め込むには - 適宜覚書-Fragments

Youtubeの動画をオートプレイでミュート状態で埋め込むには

   

Youtubeの動画を自サイトに埋め込むには色々な方法がありますが、一番手っ取り早いのは標準で提供されるiframe要素での埋め込みコードを張り付けることです。動画サイズ、コントロールの表示・非表示、動画タイトルの表示・非表示などもコード画面で簡単に選択することが出来ます。とりあえずの利用ならこれで十分な訳ですが、実はYoutube Player APIを使うとYouTube 動画プレーヤーをウェブサイトに埋め込み、JavaScript でプレーヤーをより柔軟に制御できます。

例えば、ページを開いたと同時にオートプレイで再生するようにします。でも、いきなり再生されて音が出てしまっては困る視聴者もいるかもしれませんのでミュート状態にしておく…といったことが出来ます。

Youtubeの動画をオートプレイでミュート状態で埋め込む

まず、埋め込みたいYoutube動画のIDを取得します。URLのv=以降の文字列です。この文字列で以下のコードのYOUR_VIDEO_ID部分を置き換えます。

各種の制御パラメータについてコメントで示していますが、これが全部という訳ではありません。詳細はパラメータ定義のドキュメントを読んでください。項目に対するパラメータも必ずしも一定している訳ではありません。また、改訂履歴にありますように項目やパラメータの追加や廃止、変更がありますので維持管理するためにはこの公式のドキュメントに注視する必要があります。

元ネタ

元ネタはDegital Ispirationの「How to Embed a YouTube Video with Sound Muted」です。毎度目の付け所が独特です。このAPI自体は昔から少しづつ改善が加えられているものらしいですけれど、やってみたいなあと思う使い方を具体的に切り出して誰でも出来るように提示してくれるのが凄いです。

How to Embed a YouTube Video with Sound Muted
Learn how to embed a YouTube video that autoplay but the sound is muted. The YouTube video will automatically play when the webpage is loaded but with the vo...

尚、上のコードはループを単一動画で有効にするため、一行だけオリジナルには無いplaylistを筆者が追加しています

終わりに

Facebookの投稿では埋め込み動画の自動再生は標準となっていますが、自サイトへの埋め込みの場合冒頭に書いたように自動再生と共に音を出してしまうのがちょっと悩ましかったですが、これで解決です。後は動画のロードをもう少し上手く視聴者の気にならないような感じで裏で出来るようなやり方があると嬉しいですね。なんか上手い手どこかにあるのかしら?

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Facebook ,