YouTubeの動画をPC用Webに埋め込み、
- 標準では音声なし、字幕ありの動画を自動再生
- 音声あり、字幕なしへのリンクを表示
とかやる方法です。
こうしておけば、プロモーション的動画を無理矢理来訪者に見せることができます。
マーケティングファーストで、UXファーストじゃないのでアレですけどね。
スマフォは自動再生ができないので、普通のiframe埋め込みを表示します。
デモページ
動画表示の幅とか細かいとこは適当でごめんね。
まずは動画の準備
YouTubeに動画を登録します。
僕はiMovieから「共有」で動画登録をしています。
字幕を入れる
- YouTube画面右上の「アカウント」「クリエイターツール」をクリック
- 「動画の管理」をクリックし、字幕を入れたい動画の「編集」の右にあるプルダウンから「字幕」をクリック
- 「新しい字幕を追加」「日本語」とクリック
- 字幕を上げる方法は幾つかあります。今回は「新しい字幕を作成する」をクリック
- 字幕のテキストを入力。「+」ボタンをクリックします。
- 字幕が出る、消えるタイミングの調整もできます。
- 右上の「公開」をクリック
Webページに埋め込む
YouTubeの「共有」「埋め込みコード」で取得したiframeソースにパラメーターをつけるだけで、自動再生、字幕の有無は設定できるのですが、「音声なし」はコントロールできません。
なので、YouTubeのiframe_apiでWebページに表示させます。
ソース
音声ありの動画はこちら
こんな感じでいかがでしょうか。
One thought on “YouTube動画をWebページに埋め込み、字幕版・音声あり版を切り替えたい”