HTMLのvideoタグとは？動画の埋め込み方法や属性の使い方を初心者向けに解説

Webページに動画を表示したいとき、YouTubeの埋め込みだけでなく、HTMLのvideoタグを使って動画ファイルを直接表示する方法があります。videoタグを使うと、商品紹介動画、操作デモ、背景動画などをページ内に配置できます。
videoタグは、HTMLだけでWebページに動画を埋め込むためのタグです。この記事では、videoタグの基本的な使い方、よく使う属性、sourceタグや字幕の指定、実務で注意したいポイントを初心者向けに解説します。

HTMLのvideoタグとは？

videoタグは、Webページ上に動画プレイヤーを表示するためのHTMLタグです。動画ファイルのパスを指定することで、ブラウザ上で動画を再生できます。

videoタグの役割

videoタグの役割は、ページ内に動画コンテンツを表示し、再生・一時停止などの操作を可能にすることです。

<video src="movie.mp4" controls></video>

この例では、movie.mp4という動画ファイルをページ内に表示し、controls属性によって再生ボタンなどの操作パネルを出しています。

controls属性は基本的に付ける

videoタグにcontrols属性を付けると、再生、停止、音量調整、シークバーなどの操作UIが表示されます。

<video src="lesson.mp4" controls></video>

ユーザーが自分で再生を操作できるようにするため、通常の動画にはcontrols属性を付けるのが基本です。controls属性を付けないと、ユーザーが動画を再生・停止できず、使いにくいページになる場合があります。

videoタグの基本的な書き方

videoタグでは、src属性に動画ファイルを指定する方法と、sourceタグを中に入れて複数形式の動画を指定する方法があります。

src属性で動画ファイルを指定する

もっともシンプルな書き方は、videoタグのsrc属性に動画ファイルを指定する方法です。

<video src="sample.mp4" controls width="640"></video>

width属性を指定すると、動画の表示幅を調整できます。高さは動画の比率に合わせて自動で決まることが多いです。

CSSでレスポンシブ対応する

実務では、videoタグにwidth="640"のような固定幅を指定するだけでは不十分です。スマートフォンでは画面幅より動画が大きくなり、横スクロールやレイアウト崩れの原因になります。

<video class="responsive-video" src="sample.mp4" controls></video>

.responsive-video {
  display: block;
  max-width: 100%;
  height: auto;
}

videoタグをスマホ対応させる場合は、CSSで max-width: 100%; height: auto; を指定するのが基本です。動画の周りに余白を付けたい場合は、videoタグそのものではなく、親要素側で幅や余白を管理すると扱いやすくなります。

sourceタグで複数形式を指定する

ブラウザによって対応している動画形式が異なる場合に備えて、sourceタグを使って複数の動画形式を指定できます。

<video controls width="640">
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.webm" type="video/webm">
  お使いのブラウザはvideoタグに対応していません。
</video>

ブラウザは上から順に読み込み、再生できる形式を使います。実務では、互換性を考えてsourceタグで複数形式を用意することがあります。

代替テキストを用意する

videoタグの中にテキストを書くと、videoタグに対応していない環境で表示されます。

<video controls>
  <source src="intro.mp4" type="video/mp4">
  動画を再生できない環境です。
</video>

すべての環境で同じように再生できるとは限らないため、代替の案内を入れておくと親切です。

videoタグでよく使う属性

videoタグには、再生方法や表示を調整するための属性がいくつかあります。ここでは、実務でよく使う属性を紹介します。

poster属性でサムネイルを表示する

poster属性を使うと、動画が再生される前に表示する画像を指定できます。

<video src="service.mp4" controls poster="thumbnail.jpg"></video>

動画の内容がわかるサムネイルを設定しておくと、ユーザーが再生前に内容を理解しやすくなります。videoタグでは、poster属性で動画の第一印象を整えることができます。

autoplay属性とmuted属性

autoplay属性を付けると、ページ読み込み時に動画を自動再生しようとします。ただし、多くのブラウザでは音声付きの自動再生が制限されています。

<video src="background.mp4" autoplay muted loop playsinline></video>

背景動画のように自動再生したい場合は、muted属性で音声を消し、loop属性で繰り返し再生、playsinline属性でスマホでもページ内再生しやすくすることがあります。音声付きの動画を勝手に自動再生すると、ユーザー体験を悪くする可能性があります。自動再生は必要な場面に絞りましょう。

iOS・Safariで自動再生させる場合はmutedとplaysinlineが重要

iPhoneやiPadのSafariでは、動画の自動再生に制限があります。特に背景動画や数秒のループ動画を自動再生したい場合、autoplayだけでは再生されないことがあります。

iOS・Safariで自動再生を狙う場合は、autoplay・muted・playsinlineをセットで指定するのが実務上の基本です。

<video autoplay muted loop playsinline poster="poster.jpg">
  <source src="background.mp4" type="video/mp4">
</video>

<video autoplay loop>
  <source src="background.mp4" type="video/mp4">
</video>

この例では、音声がミュートされておらず、playsinlineも指定されていません。ブラウザ側の自動再生制限により、ユーザー操作なしでは再生されない可能性があります。

「PCでは自動再生されるのにiPhoneだけ動かない」という場合は、mutedとplaysinlineの指定漏れを最初に確認しましょう。

preload属性で読み込み方を調整する

preload属性は、動画をどの程度事前に読み込むかを指定する属性です。

<video src="movie.mp4" controls preload="metadata"></video>

metadataを指定すると、動画全体ではなく長さやサイズなどの情報を中心に読み込みます。ページ表示の重さを抑えたいときに使われます。

動画は容量が大きくなりやすいため、preload属性やファイルサイズを意識することが重要です。

字幕やアクセシビリティを考える

動画は視覚と音声で情報を伝えられる便利なコンテンツですが、音声を聞けない環境や、動画を再生できない環境のユーザーもいます。実務では字幕や説明文も大切です。

trackタグで字幕を指定する

trackタグを使うと、動画に字幕ファイルを指定できます。

<video controls>
  <source src="lesson.mp4" type="video/mp4">
  <track src="captions-ja.vtt" kind="captions" srclang="ja" label="日本語">
</video>

字幕があると、音を出せない環境でも動画内容を理解しやすくなります。

動画の内容を本文でも補足する

重要な説明を動画だけに入れてしまうと、動画を見られないユーザーに情報が伝わりません。動画の下に要点を文章でまとめると親切です。

<video src="howto.mp4" controls></video>
<p>この動画では、HTMLファイルの作成からブラウザ表示までの流れを解説しています。</p>

大切な情報は動画だけで完結させず、本文でも補足するとアクセシビリティとSEOの両面で伝わりやすくなります。

videoタグを使うときの注意点

videoタグを使うとページ内に動画を表示できますが、動画はファイルサイズが大きくなりやすく、ページ速度や通信量に影響します。

動画ファイルの容量を軽くする

高画質すぎる動画をそのまま置くと、ページの読み込みが遅くなります。必要な解像度に調整し、圧縮してから使うことが大切です。ファイルサイズの大きい動画を複数配置すると、スマホ回線では表示が重くなり、離脱につながる可能性があります。

YouTube埋め込みとの使い分け

自社サーバーに動画を置いてvideoタグで表示する方法もありますが、配信量が多い動画はYouTubeや動画配信サービスを使った方が管理しやすいこともあります。

方法	向いているケース	注意点
videoタグ	背景動画、数秒のループ動画、商品や機能の短いデモ、サイトデザインに自然に組み込みたい動画	動画容量が大きいとサーバー負荷や通信量が増える
YouTube埋め込み	尺の長い動画、講座動画、インタビュー、画質を自動調整したい動画、多くの再生が見込まれる動画	YouTube側のUIや関連表示の影響を受ける

短い背景動画やループデモはvideoタグ、長尺動画や配信負荷を抑えたい動画はYouTube埋め込みを選ぶと判断しやすいです。

実務では、ファーストビューの背景動画や数秒の操作デモはvideoタグ、講義動画やセミナー動画はYouTube埋め込みにするケースが多いです。特に長い動画を自社サーバーに置くと、通信量が増えてページ表示やサーバー費用に影響することがあります。videoタグで動画を直接配信する場合は、ファイルサイズ、同時アクセス数、スマホ回線での読み込み速度を必ず確認しましょう。

公式ドキュメントも確認する

videoタグの属性や仕様を詳しく確認したい場合は、公式ドキュメントも参考になります。

• MDN Web Docs video要素
• HTML Living Standard video要素
• WebKit New video policies for iOS

まとめ

この記事では、HTMLのvideoタグについて解説しました。

videoタグは、Webページに動画を埋め込むためのHTMLタグです。controls属性で操作パネルを表示し、poster属性でサムネイル、sourceタグで複数形式、trackタグで字幕を指定できます。動画はユーザーに情報を伝えやすい一方で、ファイルサイズや自動再生の扱いに注意が必要です。実務では、ページ速度、スマホ表示、アクセシビリティを確認しながらvideoタグを使いましょう。

特に、iOS・Safariで背景動画を自動再生したい場合は、autoplay、muted、playsinlineをセットで指定することが重要です。また、スマホ対応ではCSSでmax-width: 100%;とheight: auto;を指定し、動画が画面幅からはみ出さないようにしましょう。