Youtubeにアップロードした動画を、自分のWEBサイトに埋め込みたいと思ったことはありませんか？Youtube動画の埋め込みコードは簡単な手順でコピーすることができるほか、HTMLコードの記述を変更することでカスタマイズを行うこともできますよ。この記事では、Youtubeの動画をWEBサイトに埋め込む方法をご紹介していきます。
もしYoutube動画のURLをQRコードに変換して埋め込みたいという場合は、下記リンク先の記事を参考にしてみてくださいね。
Youtubeの動画をWEBサイトに埋め込む方法
Youtubeの動画をWEBサイトに埋め込む方法
それでは、Youtubeの動画をWEBサイトに埋め込む方法を説明します。まずは埋め込みたいYoutube動画のページにアクセスして、動画の下部にある「共有」ボタンをクリックしましょう。
「共有」ウィンドウが開きます。「埋め込む」ボタンをクリックしましょう。
「動画の埋め込み」ウィンドウが表示されます。HTMLコードが表示されるので、ウィンドウ右下の「コピー」ボタンをクリックすればコードがコピーされますよ。あとは自分のWebサイトにこのコードを埋め込むことでYoutube動画をWebサイトに表示させることができますよ。
動画を埋め込む際のオプションについて
動画を埋め込むHTMLコードのコピー時に、「開始位置」のチェックボックスをオンにすると動画の開始位置を選択することができます。チェックボックスをオンにしてから動画を開始させたい時間を入力しましょう。
「プレーヤーのコントロールバーを表示する。」のチェックボックスをオンにすれば、Webサイトに埋め込んだ動画にコントロールバーが表示されるようになり、ユーザー側で動画の早送りや巻き戻しが行えるようになります。「プライバシー強化モードを有効にする」のチェックボックスをオンにすると、ユーザーが動画を再生するまでそのYoutubeがユーザー情報を取得しないようになります。こちらの項目はオフでも特に問題はありません。
埋め込んだ動画のウィンドウサイズを変更する方法ですが、画像を例にするとHTMLコードの「width="560"」の部分が横幅・「height="315"」の部分が高さになります。横幅と高さを変更するには、それぞれの数字部分に変更したいサイズを入力すればOKです。
Youtube動画の埋め込みコードは、自動再生の指定・字幕の自動表示・動画の画質の指定・アノテーション（おすすめなどのテキスト表示）の非表示・Youtubeロゴの非表示・関連動画の非表示・ビデオ進行バーの色の変更・全画面表示の無効化などのカスタマイズを行うことができます。これらのカスタマイズについては、下記リンク先の記事にて説明していますのでぜひご覧ください。
埋め込んだ動画をレスポンシブ対応させたい場合
埋め込んだ動画をレスポンシブ対応させたい場合は、HTMLコードを「<div class="youtube">〜</div>」で囲みます。この囲んだブロック要素と動画の埋め込みコードをCSSに指定し記述を行うことで動画をレスポンシブ対応させることができます。下記リンク先の記事にて簡単にレスポンシブ対応させる方法ついて説明していますので、併せてご覧ください。