ホームページにMP4動画を埋め込む方法まとめ｜基本から応用まで解説

HTMLにMP4動画を埋め込む方法はいくつかありますが、基本的な方法は<video>タグを使用することです。

基本的な埋め込み方法

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  お使いのブラウザは動画タグをサポートしていません。
</video>

説明

• <video> タグを使って動画を埋め込む
• controls を指定すると、再生・停止などのコントロールバーが表示される
• <source> タグで動画のファイルを指定
• width と height で動画の表示サイズを指定（省略可能）
• <source> タグ内の type="video/mp4" でMP4ファイルであることを明示
• もしブラウザが動画タグをサポートしていない場合、メッセージが表示される

自動再生・ループ再生

以下のようにすれば、自動再生やループ再生が可能です。

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

属性の意味

• autoplay → ページ読み込み時に自動再生（ただし音声があるとブロックされることが多い）
• loop → 動画が終わったら最初から再生
• muted → 音声をミュート（autoplayと一緒に使う場合は必須）
• playsinline → iOSデバイスで全画面ではなくページ内で再生する

背景動画として埋め込む

背景動画として使いたい場合、CSSと組み合わせて以下のように設定できます。

<video autoplay loop muted playsinline id="bg-video">
  <source src="background.mp4" type="video/mp4">
</video>

<style>
  #bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
  }
</style>

ポイント

• position: fixed; → ページ全体の背景に配置
• object-fit: cover; → 動画が画面いっぱいに広がるよう調整
• z-index: -1; → 背景として前面のコンテンツの下に配置

JavaScriptで再生・停止を制御

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
</video>
<button onclick="playVideo()">再生</button>
<button onclick="pauseVideo()">停止</button>

<script>
  function playVideo() {
    document.getElementById("myVideo").play();
  }
  function pauseVideo() {
    document.getElementById("myVideo").pause();
  }
</script>

注意点

• MP4だけでなくWebMやOggを用意するとより多くのブラウザで対応可能
• <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> お使いのブラウザは動画タグをサポートしていません。 </video>
• 大きな動画ファイルはCDNやストリーミングサービスを活用すると良い
  • YouTubeやVimeoを埋め込む方法もある（<iframe>を使う）