YouTube動画のHTML埋め込み方法！レスポンシブ対応やカスタマイズ方法も解説！

今回はYouTube動画をHTMLでブログなどに埋め込む方法を解説します。HTMLでYouTube動画を埋め込む方法としては、YouTubeで発行したリンクをHTMLで埋め込む「iframeタグ」と、YouTube動画を一般的な動画ファイル（例えばmp4）に変換してHTMLで埋め込む「videoタグ」の2つの方法が考えられます。

まず、「iframeタグ」を使って、YouTube動画をHTMLに埋め込む方法を解説します。

「iframeタグ」とは、YouTubeなどの動画配信サービスにアップされている動画のリンクを発行し、発行されたリンクをそのままHTMLにコピー＆ペーストするだけで、YouTubeなどの動画をブログなどに埋め込める機能です。

YouTubeで「iframeタグ」を利用するには、任意のYouTube動画のページで「共有」をクリックします。

表示されたウインドウ内の「埋め込む」をクリックします。

埋め込み用のリンクコードが発行されるのでコピーして、そのままHTMLにペーストすればYouTube動画を埋め込めます。コピー＆ペーストで動画の埋め込みが済むので、とても簡単です。

次に、「videoタグ」を使って、YouTube動画をHTMLに埋め込む方法を解説します。

「videoタグ」とは、一般的な動画ファイル（例えばmp4）をサーバーにアップロードして、その動画ファイルを設置したサーバー内のパス（URL）をHTMLのコード内に入力して、動画を埋め込むという機能です。

ただ、ここで注意したい点は、著作権上、YouTube動画の録画使用はあくまで自己責任で行う必要があるという点です。日本国内では私用（個人で楽しむ）目的でYouTube動画の録画を行うことは許されるようですが、YouTube動画の録画ファイルの取り扱いに関しては自分の使用条件について良く調べた上で埋め込むようにしましょう。

「videoタグ」のコードはいたってシンプルです。以下のようになります。

<video src="動画ファイルのパス"></video>

丁度、画像ファイルをHTMLに埋め込む「imgタグ」のような使い方になります。ただ、これだけでは動画を張り付けただけなので、細かい設定・カスタマイズに関しては後述します。

次に、HTMLで埋め込んだYouTube動画をレスポンシブ対応にする手順を説明します。HTMLで埋め込んだYouTube動画をレスポンシブ対応にするには、HTML以外にCSSでも設定する必要があります。CSSとは、HTMLとは別にサイトのデザインなどを記述する設定言語です。

動画をレスポンシブ対応にするには、まず、CSSで以下のコードを入力します。

.任意の動画の名前{
position:relative;
width:100%;
padding-top:56.25%;
}
.任意の動画の名前 iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}

例として、WordPressで動画のレスポンシブ設定を行う場合は、コントロールパネルから「外観」→「カスタマイズ」→「追加CSS」で上記のコードをペーストします。

「任意の動画の名前」はこの後、HTMLでコードを入力するときに同じ文字列を引用するので控えて置いてください。

動画をレスポンシブ対応にする際の、HTMLのコード入力は以下になります。

<div class=”任意の動画の名前”>
動画の埋め込みコード
</div>

例えば、前述の「videoタグ」のコードを埋め込む場合は以下になります。

<div class=”任意の動画の名前”>
<video src="動画ファイルのパス"></video>
</div>

YouTubeで発行された「iframeタグ」のコードを埋め込む場合も同様です。

<div class=”任意の動画の名前”>
YouTubeで発行された「iframeタグ」
</div>

これで埋め込んだ動画がレスポンシブ対応になります。

「videoタグ」を使ってHTMLで埋め込んだYouTube動画をカスタマイズする方法を、以下に解説します。前述した「videoタグ」の基本形を各種機能コードでカスタマイズすれば、自分のニーズに合った動画環境を設定できます。

HTMLで埋め込んだYouTube動画にコントロールパネルをカスタマイズするには、以下のようにコードを入力します。

<video src="動画ファイルのパス" controls></video>

このコードをHTMLにコピー＆ペーストすれば、HTMLで埋め込んだYouTube動画に、再生や音量調節のアイコンが表示されます。

HTMLで埋め込んだYouTube動画が自動再生するようにカスタマイズする場合は、以下のようにコードを入力します。

<video src="動画ファイルのパス" autoplay muted></video>

「autoplay」は自動再生、「muted」はデフォルトで消音設定であることを意味します。このコードをHTMLにコピー＆ペーストすれば、サイトのページを表示したときにHTMLで埋め込んだYouTube動画が自動再生されます。

HTMLで埋め込んだYouTube動画を、繰り返し（ループ）再生する場合は以下のようにコードを入力します。

<video src="動画ファイルのパス" loop autoplay muted></video>

このコードをHTMLにコピー＆ペーストすれば、サイトのページを表示したときにHTMLで埋め込んだYouTube動画が繰り返し（ループ）再生されます。

HTMLで埋め込んだYouTube動画にオープニング画像を表示する場合は以下のようにコードを入力します。

<video src="動画ファイルのパス" poster="オープニング画像ファイルのパス" controls></video>

このコードをHTMLにコピー＆ペーストすれば、サイトのページを表示したときにオープニング画像が表示され、コントロールパネルで動画を再生するとオープニングの画像が動画に切り替わります。

一度動画を再生すると、その後はオープニング画像が表示されることはありません。記事や動画に関するテロップのような使い方ができます。

動画の表示・再生の仕方で、インライン再生というものがあります。インライン再生とは、ブラウザの影響を受けることなく元の動画サイズを固定して再生するやり方です。

ブラウザによっては、動画を再生すると無条件で全画面アップで動画を再生する場合があります。そうした機能はじっくり動画を閲覧したいときは便利ですが、簡単に内容を垣間見たいというときはかえってわずらわしいものです。

動画をインライン再生に設定しておけば、動画を再生したときに自動的に全画面アップにならないので、閲覧者が自分のペースで動画閲覧できます。

HTMLで埋め込んだYouTube動画を、インライン再生に設定する場合は以下のようにコードを入力します。

<video src="動画ファイルのパス" playsinline autoplay muted></video>

このコードをHTMLにコピー＆ペーストすれば、サイトのページを表示したときに、HTMLで埋め込んだYouTube動画が自動で全画面表示になることはありません。

HTMLで埋め込んだYouTube動画の幅（width）と高さ（height）のサイズを指定する場合は以下のようにコードを入力します（例：幅（width）150px、高さ（height）100pxの場合）。

<video src="動画ファイルのパス" width="150px" height="100px" ></video>

指定サイズの単位はpx（ピクセル）になります。

ユーザーがブラウザを通してサイト上の動画コンテンツを閲覧することを想定して、ユーザーに対してより良いサイトパフォーマンスを図るために、動画の読み込みの設定を行えるコードがあります。

preloadというコードを使えば、ユーザーがブラウザを通してサイトを開いたときに、ブラウザがどの動画情報まで事前に読み込んで良いか指定できます。

指定項目は「none・metadata・auto」の3つが用意されています。

「none」はブラウザに対して、ユーザーが動画を操作するまで、動画情報の読み込みを禁じます。

「metadata」はブラウザに対して、ユーザーがサイトを開いた時点で、動画メタ情報（動画ファイルの大きさや動画の再生時間などの基本情報）のみ、読み込みを許可します。

「auto」はブラウザに対して、ユーザーが動画を操作・再生するしないにかかわらず、サイトを開いた時点で、動画ファイルの読み込みを許可します。

動画設置者は、この3つの項目設定を使ってユーザーの閲覧条件に見合った設定を行うことで、ブラウザの負担を少なくさせ、ブラウザのパフォーマンスを向上・管理できます。

HTMLで埋め込んだYouTube動画に、動画の読み込み設定を行う場合は、以下のようにコードを入力します（例：「none」を選択した場合）。

<video src="動画ファイルのパス" preload="none"></video>

「none」の位置に、任意で「metadata」「auto」を入力します。

次に、HTMLで埋め込みしたYouTube動画が再生しない場合の原因と対処法を解説します。

ベーシック認証がかかったサイトページ内に「videoタグ」を使ってHTMLで埋め込んだ動画はAndroidで再生できないという現象があります。

ベーシック認証とは、特定の人にしか閲覧を許可しないサイトページにID・パスワードを設定するセキュリティ機能です。サイトを構築するときに「.htaccess」というディレクトリ管理ファイルで設定します。

対処法としては、ベーシック認証を一旦解除して、Androidで再生できるか確認してみましょう。

「videoタグ」を使ってHTMLで埋め込んだ動画のファイル形式がmp4でも、再生がうまくいかないことがあります。原因は特殊なコーデックを使用した動画の可能性があります。

動画ファイルの形式は同じmp4であっても、圧縮方式が特殊であると「videoタグ」を使ってHTMLで埋め込んでも動画が再生できません。

埋め込んだ動画が再生できない時は「AVC形式」もしくは「H.264形式」にコーデックを変換して再度設置し直してみましょう。うまく再生できるはずです。

「videoタグ」を使ってHTMLで埋め込んだ動画がうまく再生されないとき、使用したブラウザがIE（インターネットエクスプローラー）である場合は、IEのバージョンを確認しましょう。

IEのバージョンがIE8以前である場合は「videoタグ」を使った埋め込み動画は再生できません。その際は別のブラウザで動画再生を試してみましょう。

YouTube動画をHTMLでWEBサイトに埋め込んで再生してみましょう。YouTube動画をHTMLでWEBサイトに埋め込むには2つの方法があります。

「iframeタグ」はYouTubeの動画サイトで発行される共有リンクコードです。「iframeタグ」を利用する場合は、YouTubeの動画サイトで発行されたコードをコピーしてそのままHTMLにペーストするだけです。コピー＆ペーストだけで埋め込み処理が済む点と、YouTubeのリンクなので動画再生が安定している点が「iframeタグ」のメリットです。

もう1つの方法の「videoタグ」は事前にサーバーにアップロードした動画をHTMLで埋め込む方法で、各種コードで動画をカスタマイズできる点が「videoタグ」のメリットです。

また、CSSとHTMLを合わせて設定することで、HTMLで埋め込んだ動画をレスポンシブ対応の形式にカスタマイズできます。

HTMLで埋め込んだ動画をレスポンシブ対応の形式にカスタマイズすることで、PCユーザーだけでなく、スマホ・タブレットユーザーの閲覧も獲得しやすくなります。動画を自分のサイトに埋め込むのであれば、ぜひ、レスポンシブ対応にカスタマイズしましょう。