【YouTube,Vimeo,mp4】Webサイトに動画を埋め込む方法まとめ

Web制作をしていると、サイトに動画を埋め込んで表示させたい場面はよくありますよね。

埋め込みのできる動画には、YouTube、Vimeo、mp4など、様々な形式があり、
これらを埋め込んで表示させる際には、それぞれ異なった設定方法や注意点があります。

そこで、今回はそれぞれの動画埋め込みの仕様についてまとめてみました。

また、パラメータを指定することによって

• ページが表示されたら動画を自動再生

• ミュート（サイトが表示されたらいきなり音が流れるのはユーザーに不親切です）

• ループ再生

• 動画の開始、終了のタイミング

など、色々な設定ができます。

それぞれの動画形式で主に使われるパラメータについてもまとめたので、参考になれば幸いです。

iframeタグ、videoタグの違い

動画の埋め込みに使われるタグはiframeタグ、videoタグの2種類あります。
それぞれ、以下のような使い分けがされています。

• YouTubeやVimeoのように動画サイトからURLを指定してhtmlに埋め込む → iframeタグ

• mp4ファイルをサーバーにアップロードしてhtmlに埋め込む → videoタグ

また、それぞれの特徴については以下の通りです。

iframeタグの特徴

iframeタグは以下のように記述します。

iframeタグは、ページ内に矩形の領域（フレーム）を作り、src属性で指定したURLの内容を表示させるものです。

<iframe></iframe>という形で記述しますが、タグの中には何も入らないので注意してください。

YouTubeやVimeoなどの動画を埋め込むだけでなく、GoogleMap、SNSの投稿やタイムラインを埋め込むのにも使われるタグです。

videoタグの特徴

videoタグは以下のように記述します。

videoタグは、サーバーに動画ファイルを置いてsrc属性に動画ファイルへのパスを記述して動画を表示するタグで、画像を表示させるimgタグの動画版、とイメージしてもらうとわかりやすいと思います。

videoタグもiframeタグと同様、<video></video>という形ですが中には何も入りません。
この点は<img>とは違うので注意してください。

videoタグはmp4以外にもwebm、oggの拡張子のファイルに対応していますが、mp4が最も多くのブラウザに対応しているので、videoタグで動画を扱う際は基本的にmp4ファイルを使うことが推奨されています。

iframeタグ、videoタグのメリット・デメリット

iframeタグ、videoタグそれぞれのメリット・デメリットは以下の通りです。

YouTubeの埋め込み

ここからはそれぞれの動画形式の埋め込みの記述の仕方、埋め込みの流れ、設定できる主なパラメータについてまとめました。

YouTubeの埋め込みの記述は以下の通りです。

上記のコードで、こちらの動画が表示されます。

YouTube埋め込みの流れ

YouTube埋め込みの設定の流れは以下の通りです。

1動画右下の「共有」をクリック

右下の「共有」をクリック

2「埋め込む」をクリック

「埋め込む」をクリック

3iframeタグをコピーして貼り付け

右側にiframeタグが表示されるので、それをコピーして埋め込みたい箇所に貼り付けます。

この時、動画の再生開始位置の設定、コントロールバー（再生、一時停止、シークバーなど）の表示・非表示の設定などもできます。

※シークバー・・・音楽・映像プレイヤー等で、再生箇所を示す機能。以下画像の赤枠部分。

YouTubeのパラメータ

YouTubeの埋め込み時に設定できる主なパラメータは以下の通りです。
ここに掲載しきれなかったパラメータもあるので、YouTube 埋め込みパラメータも参照してください。

Vimeoの埋め込み

Vimeoというのはあまり聞き慣れないかもしれませんが、YouTubeのような動画投稿サービスです。

• ユーザー自身が制作した動画作品以外は掲載できないので、映像クリエイターやアーティストによるクオリティの高い動画が多い

• 公開範囲を細かく設定できるのでクローズドなコミュニティでの共有がしやすい

• 広告が出ない

などの特徴があり、サイト制作をしていると時々扱うことになる動画の形式です。

Vimeoの埋め込み記述は以下の通りです。

上記のコードで、こちらの動画が表示されます。

Vimeoの埋め込みの流れ

Vimeo埋め込みの設定の流れは以下の通りです。

1「共有」をクリック

動画右上に表示されている「共有」をクリック（紙飛行機のマーク）

2iframeタグをコピーして貼り付け

iframeタグが表示されるのでコピーして埋め込みたい箇所に貼り付けます。
pタグも一緒に出力されますが、これは貼らなくても大丈夫です。

Vimeoのパラメータ

Vimeoの埋め込み時に設定できる主なパラメータは以下の通りです。
ここに掲載しきれなかったパラメータもあるので、Vimeo 埋め込みパラメータも参照してください。

mp4の埋め込み

冒頭でもお伝えしましたが、videoタグで動画を扱う際にはmp4ファイルが推奨されています。
そのため、mp4の埋込にはvideoタグを使用します。

mp4の埋め込み記述は以下の通りです。

上記のコードで、こちらの動画が表示されます。

mp4の埋め込みの流れ

mp4埋め込みの設定の流れは以下の通りです。

1src属性にファイルへのパスを記述

imgタグを使用して画像を表示させるときと同じ要領で、videoタグのsrc属性に動画ファイルへのパスを記述します。

videoタグのパラメータ

videoタグに用意されているパラメータは以下です。
ここに掲載しきれなかったパラメータもあるので、videoタグ 要素リファレンスも参照してください。

まとめ

いかがでしたでしょうか？
ただ動画を埋め込むだけなら簡単ですが、細かいパラメータ指定までしようとすると少し難しくなるのかなと思います。

この記事で紹介しきれなかったパラメータもいくつかあるので、それらについては公式サイトを見てみると良いと思います。

YouTube 埋め込みパラメータ
Vimeo 埋め込みパラメータ
videoタグ 要素リファレンス

最後までお読みいただきありがとうございました。