YouTube動画をホームページに埋め込む方法！便利なカスタマイズも紹介！

本記事ではYouTube動画をご自身のホームページに埋め込むテクニックをご紹介していきます。ご自身のブログやWebサイトでYouTube動画を埋め込む際、非常に有効なテクニックです。このテクニックを使って、ブログやWebサイトのクオリティーをあげて、クリック数をさらに伸ばしていくことも可能です。

YouTubeの埋め込みとはどういったものなのか、知らない方のために簡単にYouTube動画の埋め込みを解説します。下記の画像を参照して下さい。

こちらはYouTubeの埋め込みのサンプルを表示している、Webサイトになります。

上記の画像サンプルのように、YouTube上で公開されているYouTube動画をWebサイト上に埋め込みすることが可能なのです。本記事後半でもYouTubeの埋め込みをするメリットをご紹介しますが、YouTube動画をホームページに埋め込みすることで、ホームページのコンテンツ幅を大きく広げることができるのです。

ホームページやブログが字面や画像だけで物足りないと考えているユーザーの方は、本記事をよく読んで、YouTube動画の埋め込み方法をマスターしてみて下さい。YouTube動画の埋め込みは、埋め込みだけでなく、コードを入力することで様々なカスタマイズが可能です。次の章からは、基本的なYouTube動画の埋め込み方法をご紹介していきます。

まずご自身のホームページに埋め込みたいYouTube動画の動画ページにアクセスして下さい。YouTubeは下記のリンクからアクセス可能です。

ホームページに埋め込みたいYouTube動画ページにアクセスしたら、ホームページに埋め込むためのコードを入手します。まずはYouTube動画ページのスクリーン下にある"共有”をクリックして下さい

YouTubeの共有メニューが表示されます。メニュー一覧から"埋め込む”をクリックして下さい。

選択中のYouTube動画のサムネイルとYouTube動画の埋め込みコードが表示されます。下記画像の赤枠で囲われた部分が埋め込みコードです。コードをコピー＆ペーストすることで、YouTube動画をご自身のホームページに埋め込みすることができます。

YouTube動画の埋め込みコードは画面右下の"コピー”をクリックして下さい。

続いてYouTubeの埋め込みオプションをご紹介します。

YouTubeの埋め込みコードの下部に"埋め込みオプション"という項目が表示されています。YouTubeページの同画面からは下記のオプション項目を選択することが可能です。

• プレーヤーのコントロールバーを埋め込み動画でも表示する

• プライバシー強化モードを有効にしてYouTube動画を埋め込みする

動画の埋め込みオプションの設定が完了したら、動画埋め込みコードをコピーして、ご自身のホームページに貼り付けてください。またスマートフォン用ホームページ、PC用ホームページではサイズが異なるので、YouTube動画の埋め込み表示サイズの調整方法をご紹介します。

埋め込み動画のサイズ数値はコードの中に表記されています。下記のコードの赤字部分を見てください。

<iframe width="560"height="315"
src="https://www.youtube.com/embed/_mkiGMtbrPM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

埋め込みコードの先頭"iframe"以降の【width="560" height="315"】この部分が動画サイズの数値になります。この数字をカスタマイズする事で、埋め込み動画のサイズ変更が可能になります。ご自身のブログやWebサイトにあわせたサイズにカスタマイズしてください。

例えばブログの横幅サイズ(Width)が718px、縦幅サイズ(Height)359pxが構成上適正なサイズな場合は下記のような埋め込みコードになります。

<iframe width="718"height="359"
 src="https://www.youtube.com/embed/_mkiGMtbrPM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

ご自身のホームページから適正な横幅を調べて【Width(横幅サイズ)】から挿入し、【Height（縦幅サイズ)】をカスタマイズしながら埋め込んでいくと、上手に動画の埋め込みができるのでぜひ試してみてください。

ご自身のホームページに埋め込んだYouTube動画を確認してみてください。スマートフォン用のホームページ、パソコン用のホームページでサイズが異なります。サイズの調整が必要な場合など、細かい修正が必要な場合があります。

前述したようにサイズの微調整をすることで、よりクオリティの高いYouTube動画の埋め込みが可能になります。

本章では、YouTubeの埋め込みコードのパラメーターをカスタマイズし、ホームページに表示させる方法をご紹介します。

ApplicaがおすすめするYouTube動画埋め込みのカスタマイズ7選をご紹介します。他にも多数の埋め込み動画のカスタマイズの種類はありますが、本記事では実用的なカスタマイズコードを厳選してご紹介します。

動画のタイトルを非表示にするメリットですが、動画タイトルには、YouTube動画ページへのリンクURLが入っています。間違ってタイトルをクリックして、YouTubeの公式ページにアクセスしないようにする為に有効な手段です。また動画の見た目もシンプルになるといのも１つのメリットです。

動画のタイトルを非表示にする為のタグですが、【?showinfo=0】をURLの動画IDの後に挿入します。それでは先ほどの動画の埋め込みコードに追記してみましょう。下記サンプルを確認してください。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?showinfo=0" frameborder="0"allowfullscreen></iframe>

これでタイトルの非表示化が完了です。もしタイトルを表示したい場合は追加したコードを削除すれば、タイトルが表示されるようになります。

埋め込み動画でも動画が再生終了後には、通常のYouTubeページと同じように、関連する動画がスクリーンに表示され、関係のない動画にリンクされてしまう可能性があります。見た目自体がシンプルになるので、Webサイトの特色などを考えて、非表示化することで、ページのイメージ、印象が違ってきますので試してみてください。

動画再生後の関連動画を非表示にする為のタグは、先ほどと同じように動画URLの後ろに【?rel=0】を挿入します。下記のサンプル埋め込みコードを見てみましょう。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?rel=0" frameborder="0"allowfullscreen></iframe>
これで動画再生後に関連動画が表示されなくなります。関連動画が表示されるのが嫌な方は試してみてください。

YouTube動画の再生時間を非表示にするパラメーターは、先ほどと同じように動画URLの後ろに【?controls=0】を挿入します。下記のサンプル埋め込みコードを確認して下さい。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?controls=0" frameborder="0"allowfullscreen></iframe>
これで埋め込み動画から再生時間が表示されなくなります。

自動再生させるパラメーターはとても便利なオプションです。埋め込み動画はWebページが読み込まれても、自動再生できないように初期設定されています。自動再生を設定しておくと、ページを開くと同時に埋め込み動画が自動で再生されます。自動再生のパラメーターは、先ほどと同じように動画URLの後に【?autoplay=1】を挿入します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?autoplay=1" frameborder="0"allowfullscreen></iframe>

埋め込み動画をループ再生させるパラメーターですが、この方法を使うとWebページやブログに埋め込んだ動画が手動でストップしない限りループ状態で自動再生されます。プレイヤーの非表示タグと併用すると、ユーザーが再生を停止することができないので、十分に注意して使用していください。この機能自体は、限定的な使い方になることが多いです。

動画をループ状態で自動再生させる為のタグは【?loop=1&playlist=動画URL】となります。先ほどまでと違うのは、タグの後に動画URLを再度挿入する必要がありますので、忘れずに挿入しましょう。挿入した下記サンプルの動画埋め込みコードを確認してください。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM"?loop=1&playlist=_mkiGMtbrPM"frameborder="0"allowfullscreen></iframe>

埋め込み動画の再生、停止時間を設定するタグは【?start=秒数&end=秒数】となります。秒数には今まで通り、開始したい秒数、停止した秒数を入れるだけです。それでは早速サンプルの埋め込みコードをみていきましょう。今回は動画開始時間を1分30秒、動画終了時間を10分として作っています。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?start=90&end=600"frameborder="0"allowfullscreen></iframe>

埋め込み動画に自動で字幕を表示するタグは【?cc_load_policy=1】となります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?cc_load_policy=1" frameborder="0"allowfullscreen></iframe>

海外動画をホームページに埋め込む際に非常に便利な機能なので、覚えておくと非常に便利です。

YouTube動画をホームページに表示させる際の注意点をご紹介します。

YouTubeの動画を埋め込む際、著作権侵害には十分注意して下さい。音楽PVなどの公式YouTube動画はホームページ上で無断転用が禁止されている場合がほとんどです。動画を埋め込む前に、動画の著作権を確認してください。

YouTube動画の埋め込みは、長時間の動画でも埋め込み可能ですが、あまりにも長時間のYouTube動画はホームページへの埋め込みには不向きです。動画の再生時間にも注意して埋め込みして下さい。

YouTube動画をホームページに埋め込む効果は絶大です。文章や写真だけでは伝えることの難しい事柄も、YouTube動画であれば動画と音声でわかりやすくユーザーに伝えることが可能です。

YouTube動画への動画アップロードも簡単で、YouTubeで動画を非公開化しておき、ご自身のブログだけで公開することができます。オリジナルの動画コンテンツを利用することで、あなたのホームページの付加価値をさらに高めることができるのです。

本記事ではYouTube動画をホームページに埋め込む方法、またYouTube動画をホームページに埋め込む際の便利なカスタマイズ方法7選もご紹介しました。本記事を参考に、ご自身のホームページにYouTube動画の埋め込みをしてみてください。

また更に詳しいパラメータのカスタマイズを知りたい方は、下記のリンクでも詳しく紹介されているので参考にしてみてください。