初代編集長ブログ―安田英久

YouTubeの動画埋め込みで再生開始時間や字幕表示を指定する方法

YouTubeの動画を埋め込むときに、スタート時間(再生開始時間)や、字幕を出すか出さないかといった設定をするにはどうすればいいのか
Web担のなかの人

今日は、小ネタです。YouTubeの動画を埋め込むときに、スタート時間(再生開始時間)や、字幕を出すか出さないかといった設定をするにはどうすればいいのかです。

世の中にはすばらしい動画をYouTubeで公開してくれている人が、たくさんいます。ブログ記事などでそのYouTubeを埋め込んで紹介することがありますが、長い動画の途中から特に見てほしいときもありますし、英語の動画では、翻訳を付けられないにしても、せめて字幕があればわかりやすいというときがありますよね。

そういうときに、どう設定したらいいかのメモです。

というのも、そういうことを自分ですることが多いのですが、たまにしかしないので、毎回調べてるんですよね。それが面倒なので、メモ代わりに。

標準の動画埋め込みタグは、こんな感じですよね。これをベースに解説します。

<iframe width="560" height="315" src="//www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>
xxxxxxxxxxxの部分は動画IDが入ります

YouTubeの動画を再生開始場所を指定してページに埋め込む方法

埋め込み動画で再生開始の場所を指定するには、iframeのsrc属性に指定しているURLに、「start=」パラメータを付けて、秒数を指定します。

たとえば、10分55秒の位置から再生を開始するには、次のようにします。

<iframe width="560" height="315" src="//www.youtube.com/embed/xxxxxxxxxxx?start=655" frameborder="0" allowfullscreen></iframe>

start=655が、再生スタート場所の指定です。秒での指定なので、10分55秒=655秒と指定しています。

ちなみに、再生終了場所を指定することもできます。その場合は、「end=」パラメータを使って、動画の先頭からの秒数で指定します(再生開始場所からの秒数ではありません)。

<iframe width="560" height="315" src="//www.youtube.com/embed/xxxxxxxxxxx?start=655&end=775" frameborder="0" allowfullscreen></iframe>

上記の場合、10分55秒(655秒)の場所から再生をスタートして、12分55秒(775秒)の場所で再生を停止します。

URLのパラメータなので、複数のパラメータ(上記ならばstartとend)を指定する場合は、「&」でつなぎます。

YouTubeno動画を字幕ありの状態でページに埋め込む方法

埋め込み動画で字幕の状態を指定するには、iframeのsrc属性に指定しているURLに、「cc_load_policty=1」パラメータを付けます。

<iframe width="560" height="315" src="//www.youtube.com/embed/xxxxxxxxxxx?cc_load_policy=1" frameborder="0" allowfullscreen></iframe>

字幕の表示は、標準ではユーザーの設定に従うのですが、このパラメータを指定すると、ユーザーが字幕をオフにしている場合でも、字幕が表示されるようになります(もちろん、手動でオフにすることもできます)。

YouTubeno動画をアノテーションなしの状態でページに埋め込む方法

動画アノテーションは、良い情報があればいいのですが、表示をなしにして動画に集中してほしい場合もありますよね。埋め込み動画でアノテーションなしの状態を指定するには、iframeのsrc属性に指定しているURLに、「iv_load_policty=3」パラメータを付けます。

<iframe width="560" height="315" src="//www.youtube.com/embed/xxxxxxxxxxx?iv_load_policty=3" frameborder="0" allowfullscreen></iframe>

YouTubeの埋め込みにはその他のパラメータもあります

YouTubeの埋め込みにはその他のパラメータもあり、意外といろいろなことを設定できます。知りたい人は、グーグルの公式ヘルプにある、次のページを参照してください。日本語で解説されていますよ。

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

DX
Digital Transformationの略。企業におけるデジタル化・電子化 ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]