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でコードを入力するときに同じ文字列を引用するので控えて置いてください。