HTML・CSS・JavaScriptで動画を埋め込む完全ガイド：YouTube・ローカル・カスタマイズまで

Aerial view of a man using computer laptop on wooden table

動画コンテンツは、Webページの印象を大きく左右する重要な要素です。HTMLだけでも簡単に埋め込めますが、CSSやJavaScriptを使えば、デザイン性の高いプレーヤーや操作性の良いインタフェースも実現できます。この記事では、YouTubeなど外部サービスの埋め込み方法から、ローカル動画の埋め込み、再生コントロールの実装方法までを、初心者にもわかりやすく解説します。

HTMLで動画を埋め込む基本
CSSでスタイルを整える方法
JavaScriptで再生・停止などを制御する
YouTube動画を埋め込む方法
Vimeoや他のサービスにも対応するには？
音声なし自動再生を実装するには？
モーダル表示で動画を再生する（応用編）
まとめ：動画埋め込みは応用次第で大きく変わる

HTMLで動画を埋め込む基本

HTMLでは、<video>タグを使うことで、簡単に動画を表示することができます。

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

controls：再生ボタンなどの標準コントロールを表示します。
width/height：動画の表示サイズを指定。
<source>：動画ファイルのパスと形式を指定。
対応しないブラウザ用に代替テキストも設定可能。

動画ファイルの形式は、mp4、webm、oggのいずれかが一般的です。複数の<source>を記述しておけば、より多くのブラウザに対応できます。

CSSでスタイルを整える方法

HTMLのままでは見た目が少し物足りないことも。CSSを使ってスタイルを整えましょう。

video {
  border: 5px solid #333;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

このようにすることで、動画プレーヤーをスタイリッシュに見せることができます。また、レスポンシブ対応も忘れずに。

video {
  width: 100%;
  height: auto;
}

これでスマホやタブレットでも画面サイズに応じて自動的に調整されるようになります。

JavaScriptで再生・停止などを制御する

JavaScriptを使うと、動画の再生・一時停止・音量の変更などを自作ボタンで操作することができます。

以下は、簡単な再生/停止ボタンの実装例です。

<video id="myVideo" width="600" controls>
  <source src="movie.mp4" type="video/mp4">
</video>
<br>
<button ><button >
<script>
  const video = document.getElementById("myVideo");

  function playVideo() {
    video.play();
  }

  function pauseVideo() {
    video.pause();
  }
</script>

このようにJavaScriptで操作することで、カスタムUIの実装も可能になります。さらに、volumeやcurrentTime、mutedなども操作可能です。

YouTube動画を埋め込む方法

外部動画サービスの中で最も一般的なのがYouTubeです。YouTubeでは、動画ごとに「埋め込みコード」を提供しており、これをHTMLに貼り付けるだけでOKです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" 
frameborder="0" allowfullscreen></iframe>

動画IDの部分は、YouTubeのURLの末尾にある英数字です（例：https://www.youtube.com/watch?v=**dQw4w9WgXcQ** → dQw4w9WgXcQ）。

追加オプションで自動再生や再生リスト対応も可能です。

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/動画ID?autoplay=1&loop=1&playlist=動画ID" 
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Vimeoや他のサービスにも対応するには？

Vimeoも同様に埋め込みコードを提供しています。

<iframe src="https://player.vimeo.com/video/動画ID" width="640" height="360" 
frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

サービスによってオプションのパラメータが異なるため、公式の埋め込み設定を確認してカスタマイズしましょう。

音声なし自動再生を実装するには？

ユーザーの操作なしに自動再生を行うには、autoplay属性を使用しますが、ブラウザの仕様により音声付きでは無効化されることがほとんどです。音声をオフにすれば、比較的自動再生が可能です。

htmlコピーする編集する<video autoplay muted loop>
  <source src="movie.mp4" type="video/mp4">
</video>

muted：音声をミュート。
loop：繰り返し再生。

このようにして、背景動画などに使われる静かな演出が実現できます。

モーダル表示で動画を再生する（応用編）

クリックすると動画がモーダル（ポップアップ）で再生されるような演出も人気です。

<button >
<div id="videoModal" style="display:none; position:fixed; top:10%; left:10%; width:80%; height:80%; background:#000;">
  <video id="modalVideo" width="100%" controls>
    <source src="movie.mp4" type="video/mp4">
  </video>
  <button ></div>

<script>
function openModal() {
  document.getElementById("videoModal").style.display = "block";
  document.getElementById("modalVideo").play();
}

function closeModal() {
  document.getElementById("modalVideo").pause();
  document.getElementById("videoModal").style.display = "none";
}
</script>