YouTube動画を埋め込みする方法をまとめてみた【HTMLコード例あり】

YouTube動画の埋め込みには、さまざまな方法があります。そのため、イメージの動画配信サイトに合った方法を選択することが大切です。この記事では、埋め込みの方法として基本の方法からカスタマイズの方法まで紹介します。さらに、「なぜ埋め込み動画が便利なのか」についても詳しく解説していきます。ぜひ最後まで読んで理想的な動画配信サイトの作成にお役立てください。【日本語対応】動画配信サイトの構築は「コエテコカレッジ」がおすすめコエテコカレッジは、オンライン講座をスタートしたい講師向けに作られた完全日本語対応のプラットフォームです。%3Cdiv%20style%3D%22background-color%3A%20%23edf6ff%3B%20border%3A%202px%20solid%20%23024aac%3B%20padding%3A%2020px%3B%22%3E%0A%20%20%3Ch3%20style%3D%22color%3A%20%23024aac%3Bfont-size%3A20px%3B%22%3E%3Cu%3E%E3%80%90%E3%82%B3%E3%82%A8%E3%83%86%E3%82%B3%E3%82%AB%E3%83%AC%E3%83%83%E3%82%B8%E3%81%AE%E7%89%B9%E5%BE%B4%E3%80%91%3C%2Fu%3E%3C%2Fh3%3E%0A%20%20%3Cul%20style%3D%22padding-left%3A10px%3Bpadding-top%3A20px%3Bpadding-bottom%3A20px%3B%22%3E%0A%20%20%20%20%3Cli%20style%3D%22font-size%3A16px%3B%22%3E%E3%81%8A%E8%A9%A6%E3%81%97%E7%84%A1%E6%96%99%E3%83%97%E3%83%A9%E3%83%B3%E3%81%82%E3%82%8A%3C%2Fli%3E%0A%20%20%20%20%3Cli%20style%3D%22font-size%3A16px%3B%22%3E%E6%B1%BA%E6%B8%88%E3%83%BB%E5%8F%8E%E7%9B%8A%E7%AE%A1%E7%90%86%E3%81%8C%E6%89%8B%E8%BB%BD%3C%2Fli%3E%0A%20%20%20%20%3Cli%20style%3D%22font-size%3A16px%3B%22%3ELINE%E3%81%B8%E9%80%9A%E7%9F%A5%E9%80%A3%E6%90%BA%E3%81%8C%E5%8F%AF%E8%83%BD%3C%2Fli%3E%0A%20%20%20%20%3Cli%20style%3D%22font-size%3A16px%3B%22%3E%E5%8B%95%E7%94%BB%E8%AC%9B%E5%BA%A7%E8%B2%A9%E5%A3%B2%E3%81%AB%E3%82%82%E5%AF%BE%E5%BF%9C%3C%2Fli%3E%0A%20%20%20%20%3Cli%20style%3D%22font-size%3A16px%3B%22%3E%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E6%A9%9F%E8%83%BD%E3%81%82%E3%82%8A%3C%2Fli%3E%0A%20%20%3C%2Ful%3E%0A%3C%2Fdiv%3E%0A従来、会員制動画配信サイトの構築は英語を翻訳しながら利用する「Teachable（ティーチャブル）」が主流でした。コエテコカレッジでは、翻訳の必要がなくなったうえ、「有料/無料、 単発/連続、 オープン/限定」などの講座形式において自由度が高く、決済・販売促進機能付きなので面倒な契約も不要です。スマホだけで簡単にスクールを開設し、ライブ・動画のどちらの配信にも対応しています。無料で利用できますので、まずは試してみましょう。%3Ca%20href%3D%22https%3A%2F%2Fad.atown.jp%2Fcp%3Fsid%3Da3698%26amp%3Bdid%3Da204%26amp%3Bemid%3D%26amp%3Bu1%3D%22%3E%0A%20%20%3Cimg%20src%3D%22https%3A%2F%2Fad.atown.jp%2Fb%3Fid%3D41730%26amp%3Bmid%3D11294%22%20alt%3D%22%E3%80%901233%C3%97338%E3%80%91%E3%82%B3%E3%82%A8%E3%83%86%E3%82%B3%E3%82%AB%E3%83%AC%E3%83%83%E3%82%B8%E8%B3%87%E6%96%99%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%22%20style%3D%22width%3A100%25%22%3E%0A%3C%2Fa%3E%0AYouTube動画をホームページに埋め込み（貼り付け）する基本の方法YouTube動画を埋め込むには、以下のようなステップで行います。YouTube動画の「共有」をクリックするHTMLコードをコピーして貼り付けるYouTube動画の「共有」をクリックするまずは、埋め込みを考えているYouTube動画を開きます。動画の右下にある「共有」をクリックすると、いくつかの項目が並んでいる画面に切り替わります。一番左の「埋め込み」をクリックしたら、以下のようなHTMLコードがボックスに表示されるのですべてコピーしましょう。 ※〇〇〇〇は該当のURLが記述されています。動画の途中から開始したい場合は、希望の開始位置を開いてから同様の順番でコードを表示させる方法があります。開始位置の時間がわかっている場合は、以下の部分でHTMLコードをコピーする前に変更できます。HTMLコードをコピーして貼り付けるHTMLコードをコピーしたら、貼り付けたいウェブサイトのHTMLにペーストします。WordPress（クラシック）の場合は、テキストエディタに切り替えてHTMLソースコードを貼り付けるだけです。ブロックエディタの場合は、コードエディタに切り替えて貼り付けします。YouTube動画の埋め込みは、そのまま貼り付けるだけでもいいのですが、実は自分なりにカスタマイズしてオリジナリティを高められます。サイトのイメージに合わせてデザインを変更することも可能です。次の項目では、カスタマイズの方法について解説します。【コード付】YouTube動画の埋め込みカスタマイズ３選YouTubeの動画をサイトに埋め込む際には、自分のイメージに合わせたカスタマイズをすることが可能です。埋め込んだHTMLコードを少し変えて、イメージに合わせた表示スタイルに変えましょう。この項目では、以下の代表的なカスタマイズについて詳しく解説します。横幅・縦幅を調整してサイトに合わせるレスポンシブ対応で埋め込みするプレイリストを埋め込みする横幅・縦幅を調整してサイトに合わせるYouTube動画の埋め込みは、デフォルトで「560×315に設定」されています。HTMLコードを表示して「width（横幅）」と「height（縦幅）」の部分を変更するとサイズを変更できます。 ※〇〇〇〇は該当のURLが記述されています。また、HTMLを埋め込みするサイトによっては、どちらも「100%」にするだけでレスポンシブに対応できるケースがあります。このように、Webサイトやスマホで表示すると動画がはみ出る場合などは、コードを書き替えることで調整が可能です。HTMLコードを貼り付けたら埋め込み完了ですが、そのままではデバイスによっては見にくくい可能性がありますので確認しておきましょう。枠線をつけて埋め込みできる動画の周りに枠線を付ける場合は、「 frameborder="1"」を使います。デフォルトでは「0」になっているため、数値を変更しましょう。 ※〇〇〇〇は該当のURLが記述されています。レスポンシブ対応で埋め込みするYouTube動画をサイトに埋め込みしたら、さまざまなデバイスに合わせて「最適なサイズで表示するためにレスポンシブへ対応させたい」と考えるはずです。【aspect-ratioを用いる方法】一般的に、最新のブラウザを用いている場合は「aspect-ratio」を使って縦横比が崩れないように調整してレスポンシブにします。 ※〇〇〇〇は該当のURLが記述されています。上記のように、「div」を使って埋め込みするHTMLコードを囲みます。responsiveのclassは、お好きなものに変更してもらって構いません。次に、CSS（スタイルシート）へ以下の記述を追加します。YouTubeで表示されているアスペクト比は、デフォルトで「16/9」なので合わせておきます。横幅は、100%で固定しておくと安心です。.responsive {width: 100%;aspect-ratio: 16/9;}「aspect-ratio」で、縦横の比率が変更されないように固定するだけでOKです。そのほか、以下の比率でも試してお好みの比率を見つけてください。8/53/21/1また、「iframe」のwidthやheightの調整が面倒な人は、以下の記述もCSSに増やしておくと固定できます。ただし、今後で埋め込みするYouTube動画に対してすべて適用されるため、縦横比を変更する場合がある場合はおすすめできません。.responsive iframe {width: 100%;height: 100%;}【padding-topを用いる方法】古いブラウザでは、「aspect-ratio」で対応できないため「padding-top」を使ってレスポンシブに対応させます。HTML側の記述は、まったく同じです。 ※〇〇〇〇は該当のURLが記述されています。アスペクト比は、デフォルトで「16/9」です。そのため、16を100%の横幅として縦幅を計算すると、9は56.25%となります。.responsive {position: relative;padding-top: 56.25%;}.responsive iframe {position: absolute;top: 0;right: 0;width: 100%;height: 100%;}「position: relative;」は、YouTube動画を配置する場所の基準を決める記述です。「position: absolute;」は、先ほど指定した基準に配置する記述となります。そこから、「top」や「right（left）」で配置場所を指定しています。その他は、「aspect-ratio」と同じです。【一言メモ】すぐにレスポンシブで埋め込みしたい人や、CSSに記述するのが面倒という人は以下のコードをコピーして使ってください。該当の動画にあるIDを入力して、HTMLコードをテキストエディタに貼り付けるだけで『レスポンシブに対応』できます。 ※〇〇〇〇は動画のURLから以下の部分を抜き出し記述https://www.youtube.com/watch?v=〇〇〇〇プレイリストを埋め込みする埋め込みたいプレイリストを作成したら、「?listType=playlist&list=プレイリストのURL」を追加で記述して埋め込みできます。 ※〇〇〇〇は再生したい動画のID→https://www.youtube.com/watch?v=〇〇〇〇※プレイリストのURLは以下の〇〇の部分→https://www.youtube.com/playlist?list=〇〇さらに、プレイリストにある動画の番号を指定すると、その番号の動画を埋め込みできます。 例：再生したい曲の順番が5番目なら、「&index=5」を追加するプレイリストを埋め込んでおくことで、視聴後にも意図した動画を再生できるので試してみてください。コエテコカレッジで動画配信サイトを構築コエテコカレッジは、オリジナリティの高い動画配信サイトを、手軽に開設できるプラットフォームです。翻訳の必要がなくなったうえ、「有料/無料、 単発/連続、 オープン/限定」などの講座形式において自由度が高く、決済・販売促進機能付きなので面倒な契約も不要です。スマホだけで簡単にスクールを開設し、ライブ・動画のどちらの配信にも対応しています。無料で利用できますので、まずは試してみましょう。%3Ca%20href%3D%22https%3A%2F%2Fad.atown.jp%2Fcp%3Fsid%3Da3698%26amp%3Bdid%3Da204%26amp%3Bemid%3D%26amp%3Bu1%3D%22%3E%0A%20%20%3Cimg%20src%3D%22https%3A%2F%2Fad.atown.jp%2Fb%3Fid%3D41730%26amp%3Bmid%3D11294%22%20alt%3D%22%E3%80%901233%C3%97338%E3%80%91%E3%82%B3%E3%82%A8%E3%83%86%E3%82%B3%E3%82%AB%E3%83%AC%E3%83%83%E3%82%B8%E8%B3%87%E6%96%99%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%22%20style%3D%22width%3A100%25%22%3E%0A%3C%2Fa%3E%0A知っておくとお得なYouTube動画の埋め込み設定知っておくとお得なYouTube動画の埋め込み設定は、以下の通りです。おすすめ動画を表示・非表示自動再生動画を途中で停止途中から再生動画を繰り返し（ループ）再生音量のミュートYouTubeのロゴやコントロールバーの表示・非表示全画面表示の許可・拒否アノテーションの表示・非表示キーボード操作の無効化字幕の表示コントロールの言語設定変更以下を参考に、必要なものを取り入れてカスタマイズに役立ててください。 こちらのコードの〇〇〇〇の後に、パラメータを追加するだけです。複数のパラメータを指定→?パラメータ&パラメータ&パラメータおすすめ動画を非表示→「?rel=0」を追加【一言メモ】2021年12月現在、動画タイトルを非表示にする「showinfo」は廃止されています。そのため、YouTubeではタイトルを非表示にしてループ表示できません。YouTube動画の埋め込みが便利な理由YouTube動画の埋め込みは、以下のユーザーが得られる利点からおすすめできます。サイトの印象が多く残る文字より多くの情報がわかる訴求が伝わりやすくなるまた、YouTubeをサイトに埋め込むことによってもたらされる便利なポイントも3つ解説します。サーバーへ負担が少ない集客の選択肢となる滞在時間を伸ばしてSEOにアプローチできるサーバーへ負担が少ない埋め込みは、所有サーバーにかかる負担を軽減できます。通常は、所有しているサーバに動画をアップしようとすると、かなり大きな負荷がかかります。その結果、表示速度が遅くなるためサイトユーザーにストレスを与えてしまうことになるでしょう。埋め込みを行うことによって、このような負荷を軽減することができるので、ユーザーは通常の再生速度で視聴できます。集客の選択肢となるサイトからYouTube、YouTubeからサイトというように、ユーザーを誘導できるのもメリットです。幅広い年齢層にアプローチでき、ニーズのある人を誘導できるでしょう。さらに、SNSで拡散してもらえる可能性もあります。その結果、サイトもYouTubeも収益化できる好循環が期待できます。滞在時間を伸ばしてSEOにアプローチできる一般的に滞在時間の長さは、SEOの評価基準とされています。そのため、動画の閲覧で滞在時間が伸びると、SEOにアプローチしやすいです。ただし、動画によってページの表示速度が遅くなるといったデメリットもあります。離脱率を低下させるためにも、1つのページに1つだけ動画を設置したり、サイトの軽量化に踏み切るなどの工夫が必要です。動画配信サイトの構築は「コエテコカレッジ」がおすすめコエテコカレッジは、オンライン講座をスタートしたい講師向けに作られた完全日本語対応のプラットフォームです。%3Cdiv%20style%3D%22background-color%3A%20%23edf6ff%3B%20border%3A%202px%20solid%20%23024aac%3B%20padding%3A%2020px%3B%22%3E%0A%20%20%3Ch3%20style%3D%22color%3A%20%23024aac%3Bfont-size%3A20px%3B%22%3E%3Cu%3E%E3%80%90%E3%82%B3%E3%82%A8%E3%83%86%E3%82%B3%E3%82%AB%E3%83%AC%E3%83%83%E3%82%B8%E3%81%AE%E7%89%B9%E5%BE%B4%E3%80%91%3C%2Fu%3E%3C%2Fh3%3E%0A%20%20%3Cul%20style%3D%22padding-left%3A10px%3Bpadding-top%3A20px%3Bpadding-bottom%3A20px%3B%22%3E%0A%20%20%20%20%3Cli%20style%3D%22font-size%3A16px%3B%22%3E%E3%81%8A%E8%A9%A6%E3%81%97%E7%84%A1%E6%96%99%E3%83%97%E3%83%A9%E3%83%B3%E3%81%82%E3%82%8A%3C%2Fli%3E%0A%20%20%20%20%3Cli%20style%3D%22font-size%3A16px%3B%22%3E%E6%B1%BA%E6%B8%88%E3%83%BB%E5%8F%8E%E7%9B%8A%E7%AE%A1%E7%90%86%E3%81%8C%E6%89%8B%E8%BB%BD%3C%2Fli%3E%0A%20%20%20%20%3Cli%20style%3D%22font-size%3A16px%3B%22%3ELINE%E3%81%B8%E9%80%9A%E7%9F%A5%E9%80%A3%E6%90%BA%E3%81%8C%E5%8F%AF%E8%83%BD%3C%2Fli%3E%0A%20%20%20%20%3Cli%20style%3D%22font-size%3A16px%3B%22%3E%E5%8B%95%E7%94%BB%E8%AC%9B%E5%BA%A7%E8%B2%A9%E5%A3%B2%E3%81%AB%E3%82%82%E5%AF%BE%E5%BF%9C%3C%2Fli%3E%0A%20%20%20%20%3Cli%20style%3D%22font-size%3A16px%3B%22%3E%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E6%A9%9F%E8%83%BD%E3%81%82%E3%82%8A%3C%2Fli%3E%0A%20%20%3C%2Ful%3E%0A%3C%2Fdiv%3E%0A従来、会員制動画配信サイトの構築は英語を翻訳しながら利用する「Teachable（ティーチャブル）」が主流でした。コエテコカレッジでは、翻訳の必要がなくなったうえ、「有料/無料、 単発/連続、 オープン/限定」などの講座形式において自由度が高く、決済・販売促進機能付きなので面倒な契約も不要です。スマホだけで簡単にスクールを開設し、ライブ・動画のどちらの配信にも対応しています。無料で利用できますので、まずは試してみましょう。%3Ca%20href%3D%22https%3A%2F%2Fad.atown.jp%2Fcp%3Fsid%3Da3698%26amp%3Bdid%3Da204%26amp%3Bemid%3D%26amp%3Bu1%3D%22%3E%0A%20%20%3Cimg%20src%3D%22https%3A%2F%2Fad.atown.jp%2Fb%3Fid%3D41730%26amp%3Bmid%3D11294%22%20alt%3D%22%E3%80%901233%C3%97338%E3%80%91%E3%82%B3%E3%82%A8%E3%83%86%E3%82%B3%E3%82%AB%E3%83%AC%E3%83%83%E3%82%B8%E8%B3%87%E6%96%99%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%22%20style%3D%22width%3A100%25%22%3E%0A%3C%2Fa%3E%0A