Youtubeの動画をWEBサイトに埋め込む方法を紹介!

Youtubeの動画をWEBサイトに埋め込む方法を紹介!

Youtubeでアップロードした動画を、自分のWEBサイトに埋め込む方法をご存知でしょうか?WEBサイトに動画を埋め込んで、再生数・チャンネル登録の増加を狙ってみましょう。この記事では、Youtubeの動画をWEBサイトに埋め込む方法をご紹介しています。


目次[非表示]

  1. Youtubeの動画をWEBサイトに埋め込む方法

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

もしYoutube動画のURLをQRコードに変換して埋め込みたいという場合は、下記リンク先の記事を参考にしてみてくださいね。

Youtubeの動画を埋め込んだQRコードを作成する方法!

Youtubeの動画のURLをQRコードに埋め込み、WebサイトやSNS・チラシなどに貼り付けたいと思ったことはありませんか?QRコードは簡単に作成することができますよ。この記事では、Youtubeの動画を埋め込んだQRコードを作成する方法をご紹介しています。

Thumb

Youtubeの動画をWEBサイトに埋め込む方法

Youtubeの動画をWEBサイトに埋め込む方法

埋め込みたいYoutube動画のページにアクセスして、動画の下部にある「共有」ボタンをクリック
それでは、Youtubeの動画をWEBサイトに埋め込む方法を説明します。まずは埋め込みたいYoutube動画のページにアクセスして、動画の下部にある「共有」ボタンをクリックしましょう。
「共有」ウィンドウの「埋め込む」ボタンをクリック
「共有」ウィンドウが開きます。「埋め込む」ボタンをクリックしましょう。
「動画の埋め込み」ウィンドウの「コピー」ボタンをクリック
「動画の埋め込み」ウィンドウが表示されます。HTMLコードが表示されるので、ウィンドウ右下の「コピー」ボタンをクリックすればコードがコピーされますよ。あとは自分のWebサイトにこのコードを埋め込むことでYoutube動画をWebサイトに表示させることができますよ。

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

「開始位置」のチェックボックスをオンにする
動画を埋め込むHTMLコードのコピー時に、「開始位置」のチェックボックスをオンにすると動画の開始位置を選択することができます。チェックボックスをオンにしてから動画を開始させたい時間を入力しましょう。

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

動画の横幅と高さを設定する
埋め込んだ動画のウィンドウサイズを変更する方法ですが、画像を例にするとHTMLコードの「width="560"」の部分が横幅・「height="315"」の部分が高さになります。横幅と高さを変更するには、それぞれの数字部分に変更したいサイズを入力すればOKです。

Youtube動画の埋め込みコードは、自動再生の指定・字幕の自動表示・動画の画質の指定・アノテーション(おすすめなどのテキスト表示)の非表示・Youtubeロゴの非表示・関連動画の非表示・ビデオ進行バーの色の変更・全画面表示の無効化などのカスタマイズを行うことができます。これらのカスタマイズについては、下記リンク先の記事にて説明していますのでぜひご覧ください。

YouTubeの動画の埋め込みコードをカスタマイズする方法!【自動再生】

YouTube に投稿されている動画は、埋め込みコードを発行することで自由に埋め込めます。それら埋め込みコードをカスタマイズすることで自動再生なども可能です。今回はYouTube埋め込みコードをカスタマイズして自動再生などをする方法を解説します。

Thumb

埋め込んだ動画をレスポンシブ対応させたい場合

埋め込んだ動画をレスポンシブ対応させたい場合は、HTMLコードを「<div class="youtube">〜</div>」で囲みます。この囲んだブロック要素と動画の埋め込みコードをCSSに指定し記述を行うことで動画をレスポンシブ対応させることができます。下記リンク先の記事にて簡単にレスポンシブ対応させる方法ついて説明していますので、併せてご覧ください。

【コピペでOK】Youtubeの動画埋め込みをレスポンシブ対応させる方法!

Youtubeの動画埋め込みをレスポンシブ対応させる方法をご紹介していきます。この記事にあるhtmlコードをコピペして、Youtubeの動画のIDを差し替えるだけでレスポンシブなYoutubeの埋め込み動画を実現することが出来ます。

Thumb

関連記事