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

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担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

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

今日の用語

CSR
Corporate Social Responsibilityの略。 ...→用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


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