【HTML5】Webサイトの背景に動画を埋め込む方法とポイントについて

admin

2023-06-23

こんにちは。WebディレクターのNです。

画像や文章よりも、一度に多くの情報を伝えられるというメリットから、Webサイト（ファーストビューエリア）の背景に動画を設置しているWebサイトが増えています。

そこで今回は、HTMLでWebサイトに動画を埋め込む方法やポイントについてまとめてみました。

それではさっそくいってみましょう！

1.HTMLで動画を埋め込む方法

動画をどのサーバーから読み込むかによって、方法が異なります。

①直接埋め込み

自社で用意しているサーバに動画ファイルをアップし「videoタグ」を使用して再生する方法です。

例：

②外部リンクで埋め込み

動画共有サービス（YouTubeなど）に動画ファイルをアップし「iframeタグ」を使用して再生する方法です。

例：

2.メリット・デメリット

それぞれの方法によって、メリット・デメリットがあります。

①直接埋め込み

メリット
自社で用意しているサーバに動画をアップするので、動画共有サービスの終了や仕様変更を気にすることなく、運用できます。
デメリット
動画のようなサイズの大きいファイルを再生する際、サーバーへの負荷が大きくなり、表示速度が遅くなる場合があります。アップロードする動画ファイルサイズはおよそ5MBぐらいが理想です。
また、ユーザーの閲覧環境（videoタグを読み込めないなど）によっては動画を再生できない可能性があります。

②外部リンクで埋め込み

メリット
ストリーミングで動画を再生するので、サーバーへの負荷が小さいです。
基本的に、ユーザーの閲覧環境や動画のファイルサイズ*を気にせずアップすることができます。
デメリット
外部リンク元がYouTubeの場合、埋め込みプレーヤーに見えない形で埋め込むことはできません。タイトルやロゴを目立たせたくないデザインには不向きです。**

YouTube:アップロードサイズの上限サイズ
以前はパラメータ（showinfo=0）を設定することで非表示にすることが可能でしたが、現在この仕様は廃止されています。
また、タイトルやロゴの周りを枠で囲うなど、プレイヤーを意図的に見えなくするような改修は利用規約上NGとなっています。

公式：YouTube API サービス利用規約（英語）
（抜粋）
You must not display overlays, frames, or other visual elements in front of any part of a YouTube embedded player, including player controls. Similarly, you must not use overlays, frames or other visual elements to obscure any part of an embedded player, including player controls.