1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

YouTubeのWebサイト埋め込みテクニック【表示編】&【応用編】高度な設定

Last updated at Posted at 2019-10-30

はじめに

Youtubeのサイトへの埋め込み方法のまだ紹介していないもの機能について以下にまとめています。
これまで紹介したものよりは使う頻度は低いかもしれませんが、「キーボード操作を反映するか」や「英語のセリフに字幕をつけたい」などの際には役立つ機能があります。

目次

【表示編】高度な設定
12. アノテーションを非表示に
13. 動画のキーボード操作を無効化
14. デフォルトで字幕を表示させる
15. コントロールの言語設定
16. 全画面ボタンを非表示に
17. Youtubeロゴを非表示に
【応用編】複数の設定(パラメータ)を組み合わせる
18. シンプルなブログ向け、簡素化したプレイヤー
19. プレイリストを埋め込み、途中から再生する

12. アノテーションを非表示に

「アノテーション」とは、動画の上に被せるように配置されているクリックできるボタンのこと。動画を止めようと思ってクリックしたら、それがアノテーションだったりすると面倒ですね。

<iframe width="718" height="408" src="https://www.youtube.com/embed/動画ID?iv_load_policy=3" frameborder="0" allowfullscreen></iframe>

?iv_load_policy=3を追記すればアノテーションが非表示になります。アノテーションが多すぎる動画に使うと良いでしょう。
(そもそも、アノテーションが多すぎると目障りなため複数アノテーションをつけるのは好ましくありません...)

13. 動画のキーボード操作を無効化

Youtubeの動画はキーボードで操作できます。これはWebサイトに埋め込んだ動画も同じで、このキーボード操作を無効化する方法があります。

<iframe width="718" height="408" src="https://www.youtube.com/embed/動画ID?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

?enablejsapi=1を追記する。これで埋め込んだ動画をキーボードで操作出来るようになります。しかし、どちらかと言うと不便になってしまうのであまり使わないかもしれません。

Youtubeのキーボード操作
Spaceキー:再生 / 一時停止
←キー:動画を10%巻き戻し
→キー:動画を10%進める
↑キー:音量を上げる
↓キー:音量を下げる

14. デフォルトで字幕を表示させる

基本的に埋め込んだ動画には字幕は表示されません。コントロールから字幕設定すれば表示されますが、この手間を省いて最初から字幕を出してほしい場合に使用します。
英語音声、日本語字幕をYouTube側でつけている動画などのケースで有効です。

<iframe width="718" height="408" src="https://www.youtube.com/embed/動画ID?cc_load_policy=1" frameborder="0" allowfullscreen></iframe>

↑URL部分のすぐ後ろに?cc_load_policy=1を追記しています。
これで字幕が表示されます。

しかし、これだと英語になってしまうので、

<iframe width="718" height="408" src="https://www.youtube.com/embed/動画ID?cc_load_policy=1&cc_lang_pref=ja" frameborder="0" allowfullscreen></iframe>

付け足したコードの後ろに&cc_lang_pref=jaと更に追記します。これで日本語字幕が表示されます(動画側に日本語字幕が用意されていれば)。

15. コントロールの言語設定

少々マニアックな機能ですが、コントロールUI部分も外国語にできます。
海外用サイトでは必要な対応と言えます。

<iframe width="718" height="408" src="https://www.youtube.com/embed/動画ID?hl=hi" frameborder="0" allowfullscreen></iframe>

↑の例では?hl=hiを追記しており、コントロール部分の言語が「ヒンディー語」に切り替わります。

<iframe width="718" height="408" src="https://www.youtube.com/embed/動画ID?hl=de" frameborder="0" allowfullscreen></iframe>

?hl=deを追記すると、「ドイツ語」に切り替わる。
(どのキーワードで何の言語に切り替わるのか。→「ISO 639-1 2 文字言語コード」に準拠しています。)

  1. 全画面ボタンを非表示に
    埋め込んだYoutube動画のコントロールに「全画面ボタン」を表示させない設定。
<iframe width="718" height="408" src="https://www.youtube.com/embed/動画ID?fs=0" frameborder="0" allowfullscreen></iframe>

?fs=1を追記するだけでO.K.

17. Youtubeロゴを非表示に

<iframe width="718" height="408" src="https://www.youtube.com/embed/動画ID?modestbranding=1" frameborder="0" allowfullscreen></iframe>

?modestbranding=1を追記する。(Youtubeロゴが表示されなくなるが、見た目や色合いでどう見てもYouTube…。)

18.シンプルなブログ向け、簡素化したプレイヤー

<iframe width="718" height="408" src="https://www.youtube.com/embed/動画ID?rel=0&showinfo=0&iv_load_policy=3&fs=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>

非表示にするパラメータを複数組み合わせて作ります。この例の場合だと

?rel=0
&showinfo=0
&iv_load_policy=3
&fs=0
&modestbranding=1

の5つを使って、関連動画非表示、タイトル非表示、アノテーション非表示、全画面ボタン非表示、Youtubeロゴの非表示を行っています。

なお、複数のパラメータを組み合わせる時は、必ず&を間に入れてつなぐように。?でつなぐのは最初だけです。パラメータクエリの一般的な記法ですね。

19. プレイリストを埋め込み、途中から再生する

<iframe width="718" height="404" src="https://www.youtube.com/embed?listType=playlist&list=プレイリストID&index=5&showinfo=0&rel=0&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>

?listType=playlistで動画単体でなくプレイリストを埋め込む設定にします。次に埋め込みたいプレイリストを選んで&list=プレイリストのURLと入力します。
最後に&index=数と入れて、再生させたい位置を決める。今回は「&index=5」なので、プレイリストの5番目から再生されるようになりました。

まとめ

以上でパラメータで操作できるYouTube埋め込みはほぼ網羅しています。
最初から「ミュート」(消音)にしたい、動画の一部だけをループ再生させたい、
動画の再生速度を変えたいなどの場合は、現状はパラメータ設定では対応していません。
この場合は動画自体を編集して変えるか、別途再生用のスクリプトを書く必要があります。

参考:YouTube公式リファレンス
https://developers.google.com/youtube/player_parameters?hl=ja

YouTubeのWebサイト埋め込みテクニック【基本編】動画の埋め込みと設定
YouTubeのWebサイト埋め込みテクニック【再生編】動画の再生方法を設定する

1
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?