
Youtubeにアップロードした動画を、自分のWEBサイトに埋め込みたいと思ったことはありませんか?Youtube動画の埋め込みコードは簡単な手順でコピーすることができるほか、HTMLコードの記述を変更することでカスタマイズを行うこともできますよ。この記事では、Youtubeの動画をWEBサイトに埋め込む方法をご紹介していきます。
もしYoutube動画のURLをQRコードに変換して埋め込みたいという場合は、下記リンク先の記事を参考にしてみてくださいね。
Youtubeの動画をWEBサイトに埋め込む方法
Youtubeの動画をWEBサイトに埋め込む方法



動画を埋め込む際のオプションについて

「プレーヤーのコントロールバーを表示する。」のチェックボックスをオンにすれば、Webサイトに埋め込んだ動画にコントロールバーが表示されるようになり、ユーザー側で動画の早送りや巻き戻しが行えるようになります。「プライバシー強化モードを有効にする」のチェックボックスをオンにすると、ユーザーが動画を再生するまでそのYoutubeがユーザー情報を取得しないようになります。こちらの項目はオフでも特に問題はありません。

Youtube動画の埋め込みコードは、自動再生の指定・字幕の自動表示・動画の画質の指定・アノテーション(おすすめなどのテキスト表示)の非表示・Youtubeロゴの非表示・関連動画の非表示・ビデオ進行バーの色の変更・全画面表示の無効化などのカスタマイズを行うことができます。これらのカスタマイズについては、下記リンク先の記事にて説明していますのでぜひご覧ください。
埋め込んだ動画をレスポンシブ対応させたい場合
埋め込んだ動画をレスポンシブ対応させたい場合は、HTMLコードを「<div class="youtube">〜</div>」で囲みます。この囲んだブロック要素と動画の埋め込みコードをCSSに指定し記述を行うことで動画をレスポンシブ対応させることができます。下記リンク先の記事にて簡単にレスポンシブ対応させる方法ついて説明していますので、併せてご覧ください。