YouTube動画をWebページに埋め込み、字幕版・音声あり版を切り替えたい

youtube

YouTubeの動画をPC用Webに埋め込み、

  • 標準では音声なし、字幕ありの動画を自動再生
  • 音声あり、字幕なしへのリンクを表示

とかやる方法です。

こうしておけば、プロモーション的動画を無理矢理来訪者に見せることができます。
マーケティングファーストで、UXファーストじゃないのでアレですけどね。

スマフォは自動再生ができないので、普通のiframe埋め込みを表示します。

デモページ

デモページ

動画表示の幅とか細かいとこは適当でごめんね。

まずは動画の準備

YouTubeに動画を登録します。
僕はiMovieから「共有」で動画登録をしています。

字幕を入れる

  • YouTube画面右上の「アカウント」「クリエイターツール」をクリック
  • 「動画の管理」をクリックし、字幕を入れたい動画の「編集」の右にあるプルダウンから「字幕」をクリック
  • 「新しい字幕を追加」「日本語」とクリック
  • 字幕を上げる方法は幾つかあります。今回は「新しい字幕を作成する」をクリック
  • 字幕のテキストを入力。「+」ボタンをクリックします。
  • 字幕が出る、消えるタイミングの調整もできます。
  • 右上の「公開」をクリック

Webページに埋め込む

YouTubeの「共有」「埋め込みコード」で取得したiframeソースにパラメーターをつけるだけで、自動再生、字幕の有無は設定できるのですが、「音声なし」はコントロールできません。
なので、YouTubeのiframe_apiでWebページに表示させます。

ソース

こんな感じでいかがでしょうか。

ツイートツイート

“YouTube動画をWebページに埋め込み、字幕版・音声あり版を切り替えたい” への 1 件のフィードバック

  1. ピンバック: miyasaka.info

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です