BLOG

24年新卒 WEBデザイナー募集中 中途 WEBデザイナー募集中 24年新卒 WEBエンジニア募集中

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

更新日:2022/02/07

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タグそれぞれのメリット・デメリットは以下の通りです。

メリット デメリット
iframeタグ YouTube側で読み込みを行うのでサーバーの負荷を軽減できる URLでリンク先から動画を読み込んで表示させているので、動画が削除された場合は表示させることができない。
videoタグ リンク先がなくなってしまって表示できない、ということは起こらない。 容量の大きい動画だとサーバーに負荷がかかる

YouTubeの埋め込み

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

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

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

YouTube埋め込みの流れ

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

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

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

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

「埋め込む」をクリック

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

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

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

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

YouTubeのパラメータ

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

autoplay 動画が読み込まれた時に自動再生するかどうかの指定
controls 再生、一時停止、音量、シークバーなどのコントロール部分の表示・非表示
disablekb 動画の音量変更、再生、一時停止、5秒進める、5秒戻す、などのキーボード操作を許可するかどうかの指定
end 指定の秒数進んだ位置で動画を終了
fs 全画面表示ボタンの表示・非表示
loop 動画をループ再生するかどうかの指定
modestbranding YouTubeロゴの表示・非表示
mute ミュート再生
playlist 動画のIDをカンマ区切りで指定し、動画を連続で再生する
playsinline iOS上で動画をインラインで再生するか全画面表示にするかの指定
start 開始から指定の秒数進んだ位置から動画を再生

Vimeoの埋め込み

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

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

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

  • 広告が出ない

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

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

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

Vimeoの埋め込みの流れ

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

1「共有」をクリック

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

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

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

Vimeoのパラメータ

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

autopause 複数の動画が再生されたら自動で一時停止
autoplay 動画が読み込まれた時に自動再生するかどうかの指定
byline 動画の作成者を表示
controls 再生、一時停止、音量、シークバーなどのコントロール部分の表示・非表示
end 指定の秒数進んだ位置で動画を終了
loop 動画をループ再生するかどうかの指定
muted ミュート再生
background 全てのボタン操作をオフ、自動再生、自動でループ再生、ミュート(背景として動画を再生したい場合に使います)
portrait 動画の作成者のプロフィールを表示
quality 動画の画質を指定(デフォルトでは「自動」になっています)
speed 速度コントロールを表示
start 開始から指定の秒数進んだ位置から動画を再生
texttrack 特定の字幕を指定して表示
title 動画のタイトルを表示

mp4の埋め込み

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

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

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

mp4の埋め込みの流れ

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

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

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

videoタグのパラメータ

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

autoplay 自動再生
controls 再生、一時停止、音量、シークバーなどのコントロール部分の表示・非表示
height 高さ指定
loop 動画をループ再生するかどうかの指定
muted 動画を消音するかどうかの指定
playsinline スマホで動画を再生する際、全画面表示にせずインライン再生
poster 動画のダウンロード中に表示する画像をURLで指定
preload 動画を事前に読み込むかどうかの指定
width 幅指定

まとめ

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

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

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

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

FOLLOW US