YouTube動画の埋め込みには、さまざまな方法があります。そのため、イメージの動画配信サイトに合った方法を選択することが大切です。

この記事では、埋め込みの方法として基本の方法からカスタマイズの方法まで紹介します。さらに、「なぜ埋め込み動画が便利なのか」についても詳しく解説していきます。ぜひ最後まで読んで理想的な動画配信サイトの作成にお役立てください。

本メディアおすすめプラットフォームはこちら！

オンライン講座、スクール、コンテンツ販売をスタートさせるなら、プラットフォームがおすすめです。

プラットフォームは、必要な基本機能のほか、集客・マーケティングに必要な機能をそろえた万能なツールです。

必要なのは情報の入力とコンテンツだけ。月額料金のかからないプラットフォームまであり、思い描いた理想の講座・スクール・販売所を、"すぐ"作りたい方には特におすすめです。その中でも特におすすめは「オンクラス」と「OneStream」です。

オンクラス：eラーニングやオンラインコースを自分で手軽に構築したい方に最適です。

オンクラスを試してみる

OneStream：動画配信を通じてビジネスや教育の場を拡大したい方にぴったりです。

OneStreamを試してみる

YouTube動画をホームページに埋め込み（貼り付け）する基本の方法

YouTube動画を埋め込むには、以下のようなステップで行います。

• YouTube動画の「共有」をクリックする

• HTMLコードをコピーして貼り付ける

YouTube動画の「共有」をクリックする

まずは、埋め込みを考えているYouTube動画を開きます。動画の右下にある「共有」をクリックすると、いくつかの項目が並んでいる画面に切り替わります。

一番左の「埋め込み」をクリックしたら、以下のようなHTMLコードがボックスに表示されるのですべてコピーしましょう。

※〇〇〇〇は該当のURLが記述されています。

動画の途中から開始したい場合は、希望の開始位置を開いてから同様の順番でコードを表示させる方法があります。

開始位置の時間がわかっている場合は、以下の部分でHTMLコードをコピーする前に変更できます。

HTMLコードをコピーして貼り付ける

HTMLコードをコピーしたら、貼り付けたいウェブサイトのHTMLにペーストします。

WordPress（クラシック）の場合は、テキストエディタに切り替えてHTMLソースコードを貼り付けるだけです。ブロックエディタの場合は、コードエディタに切り替えて貼り付けします。

YouTube動画の埋め込みは、そのまま貼り付けるだけでもいいのですが、実は自分なりにカスタマイズしてオリジナリティを高められます。サイトのイメージに合わせてデザインを変更することも可能です。

次の項目では、カスタマイズの方法について解説します。

【コード付】YouTube動画の埋め込みカスタマイズ３選

YouTubeの動画をサイトに埋め込む際には、自分のイメージに合わせたカスタマイズをすることが可能です。埋め込んだHTMLコードを少し変えて、イメージに合わせた表示スタイルに変えましょう。

この項目では、以下の代表的なカスタマイズについて詳しく解説します。

1. 横幅・縦幅を調整してサイトに合わせる

2. レスポンシブ対応で埋め込みする

3. プレイリストを埋め込みする

横幅・縦幅を調整してサイトに合わせる

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/5

• 3/2

• 1/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」を追加する

プレイリストを埋め込んでおくことで、視聴後にも意図した動画を再生できるので試してみてください。

本メディアおすすめプラットフォームはこちら！

オンライン講座、スクール、コンテンツ販売をスタートさせるなら、プラットフォームがおすすめです。

プラットフォームは、必要な基本機能のほか、集客・マーケティングに必要な機能をそろえた万能なツールです。

必要なのは情報の入力とコンテンツだけ。月額料金のかからないプラットフォームまであり、思い描いた理想の講座・スクール・販売所を、"すぐ"作りたい方には特におすすめです。その中でも特におすすめは「オンクラス」と「OneStream」です。

オンクラス：eラーニングやオンラインコースを自分で手軽に構築したい方に最適です。

オンクラスを試してみる

OneStream：動画配信を通じてビジネスや教育の場を拡大したい方にぴったりです。

OneStreamを試してみる

知っておくとお得なYouTube動画の埋め込み設定

知っておくとお得なYouTube動画の埋め込み設定は、以下の通りです。

• おすすめ動画を表示・非表示

• 自動再生

• 動画を途中で停止

• 途中から再生

• 動画を繰り返し（ループ）再生

• 音量のミュート

• YouTubeのロゴやコントロールバーの表示・非表示

• 全画面表示の許可・拒否

• アノテーションの表示・非表示

• キーボード操作の無効化

• 字幕の表示

• コントロールの言語設定変更

以下を参考に、必要なものを取り入れてカスタマイズに役立ててください。

こちらのコードの〇〇〇〇の後に、パラメータを追加するだけです。

• 複数のパラメータを指定
  →?パラメータ&パラメータ&パラメータ

• おすすめ動画を非表示
  →「?rel=0」を追加

【一言メモ】

2021年12月現在、動画タイトルを非表示にする「showinfo」は廃止されています。そのため、YouTubeではタイトルを非表示にしてループ表示できません。

YouTube動画の埋め込みが便利な理由

YouTube動画の埋め込みは、以下のユーザーが得られる利点からおすすめできます。

• サイトの印象が多く残る

• 文字より多くの情報がわかる

• 訴求が伝わりやすくなる

また、YouTubeをサイトに埋め込むことによってもたらされる便利なポイントも3つ解説します。

1. サーバーへ負担が少ない

2. 集客の選択肢となる

3. 滞在時間を伸ばしてSEOにアプローチできる

サーバーへ負担が少ない

埋め込みは、所有サーバーにかかる負担を軽減できます。

通常は、所有しているサーバに動画をアップしようとすると、かなり大きな負荷がかかります。その結果、表示速度が遅くなるためサイトユーザーにストレスを与えてしまうことになるでしょう。

埋め込みを行うことによって、このような負荷を軽減することができるので、ユーザーは通常の再生速度で視聴できます。

集客の選択肢となる

サイトからYouTube、YouTubeからサイトというように、ユーザーを誘導できるのもメリットです。幅広い年齢層にアプローチでき、ニーズのある人を誘導できるでしょう。

さらに、SNSで拡散してもらえる可能性もあります。

その結果、サイトもYouTubeも収益化できる好循環が期待できます。

滞在時間を伸ばしてSEOにアプローチできる

一般的に滞在時間の長さは、SEOの評価基準とされています。そのため、動画の閲覧で滞在時間が伸びると、SEOにアプローチしやすいです。

ただし、動画によってページの表示速度が遅くなるといったデメリットもあります。

離脱率を低下させるためにも、1つのページに1つだけ動画を設置したり、サイトの軽量化に踏み切るなどの工夫が必要です。

オンライン講座ならプラットフォームがおすすめ

本メディアおすすめプラットフォームはこちら！

オンライン講座、スクール、コンテンツ販売をスタートさせるなら、プラットフォームがおすすめです。

プラットフォームは、必要な基本機能のほか、集客・マーケティングに必要な機能をそろえた万能なツールです。

必要なのは情報の入力とコンテンツだけ。月額料金のかからないプラットフォームまであり、思い描いた理想の講座・スクール・販売所を、"すぐ"作りたい方には特におすすめです。その中でも特におすすめは「オンクラス」と「OneStream」です。

オンクラス：eラーニングやオンラインコースを自分で手軽に構築したい方に最適です。

オンクラスを試してみる

OneStream：動画配信を通じてビジネスや教育の場を拡大したい方にぴったりです。

OneStreamを試してみる