Markdownで動画を埋め込む究極のガイド：初心者でもわかる手順と3つのテクニック＋実際のコード例

はじめに

Markdown で記事を書くとき、テキストや画像以外にも動画を載せたいときが多いですよね。動画は読者への視覚的な説明やデモンストレーションに最適ですが、Markdown の仕様上「動画」要素自体は存在しません。この記事では、初心者にも分かりやすく、Markdown で動画を埋め込む究極の手順を紹介します。さらに、3つの実践テクニックとそれぞれのコード例を載せるので、すぐに試せるはずです。

Markdown で動画を扱うときの基本的な制約

1. Markdown の定義と動画の欠如

Markdown は テキスト・イメージ・リンク を扱う軽量マークアップ言語として設計されました。したがって、公式仕様には video タグや動画埋め込み用の短縮記法は存在しません。

2. HTML の併用が必要

多くの Markdown エンジンは 擬似インライン HTML を許容しています。つまり、HTML タグをそのまま貼り付けると、生成された HTML の中に埋め込むことで動画再生が可能です。以下の章で具体的な方法を紹介します。

3. プラットフォームごとの注意

ステップ 1: 動画をホストする

まずは動画ファイル（.mp4, .webm, .ogv など）や外部サイト（YouTube, Vimeo, ニコニコ動画等）を決めます。

• 自前のサーバー: 直接ホストするとファイルサイズが大きくなるため、CDN の利用が望ましい。
• 外部サービス:
  • YouTube: embed URL で簡単に埋め込み可能。
  • Vimeo: プライバシー設定やカスタムプレイヤーが豊富。

ステップ 2: HTML タグを Markdown に埋め込む

2-1. <iframe> タグ

外部サービス（YouTube, Vimeo）で最も一般的な方式です。

## YouTube での動画埋め込み例

以下に YouTube の動画を埋め込みます。

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

• width、height は任意。レスポンシブ対応も可能。
• allowfullscreen は全画面表示を許可します。

2-2. <video> タグ

自前でビデオをホストしている場合、HTML5 <video> タグが使えます。

## オンプレミスでホストする動画

```html
<video width="640" height="360" controls preload="metadata">
  <source src="https://cdn.example.com/videos/sample.mp4" type="video/mp4">
  <source src="https://cdn.example.com/videos/sample.webm" type="video/webm">
  お使いのブラウザは動画タグに対応していません。
</video>

- `controls` でプレイヤー UI を表示。
- `preload` を `metadata` にすると、ページロード時にファイルサイズをダウンロードしない設定。

**ポイント**: 3 つ以上の `source` を用意して、ブラウザ互換性を確保しましょう。

--- 

## ステップ 3: 直感的に動画を配置するテクニック 3 つ

### テクニック 1: `<iframe>` を使ったシンプル埋め込み

- **対象**: YouTube, Vimeo, Dailymotion など
- **メリット**: 設定が簡単、広告付き、統計が取得可能
- **デメリット**: 外部依存、サイトによってはブロックされる可能性

```markdown
以下は Vimeo の埋め込み例です。

<iframe src="https://player.vimeo.com/video/987654321?vimeo.com/player" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

テクニック 2: 画像リンク＋モーダル再生

動画を縮小して画像リンクとして配置し、クリック時にモーダルプレイヤーで再生します。主に Bootstrap や Tailwind CSS を使ったサイトで有効です。

## 画像リンクで動画を再生

[![動画を再生](https://cdn.example.com/poster.png)](https://cdn.example.com/videos/sample.mp4)

ただし、この方法ではユーザーは動画の URL を直接開く形になるため、モーダルやプレイヤーの制御ができません。JavaScript でカスタムプレイヤーを追加する場合は別途コードが必要です。

テクニック 3: ショートコードによる自動埋め込み

Jekyll や Hugo などの Static Site Generator では、動画専用のショートコードが用意されています。ここでは Hugo で video ショートコードを使うケースを紹介します。

## Hugo のショートコードで動画を埋め込む

{{< video url="https://cdn.example.com/videos/sample.mp4" width="640" height="360" >}}

ポイント:

• テーマに video.html がない場合は、テンプレートを作成する必要があります。
• ショートコードを使うとコードの可読性が向上し、再利用がしやすくなります。

実際のコード例 – アプリケーション別

アクセシビリティ（A11y）と SEO のベストプラクティス

1. 曖昧なプレイヤー

• controls 属性を必ず入れ、ユーザーが再生・停止・音量制御できるようにします。

2. 代替テキスト (alt)

• <video> タグの場合、<track kind="captions"> で字幕ファイル vtt を指定するとアクセシビリティが向上します。

<video controls width="640" height="360">
  <source src="sample.mp4" type="video/mp4">
  <track kind="captions" srclang="ja" label="日本語字幕" src="sample-ja.vtt">
  文字起こしと字幕を用意し、より多くのユーザーへの配慮を。
</video>

3. 動画のロード時間の最適化

• lazy-loading: <iframe> に loading="lazy" を追加すると初期読み込みが軽減されます。
• ファイルサイズ: WebP 風の webm を併用し、ストリーミング配信を推奨します。

まとめ

• Markdown で動画を直接埋め込む機能はないが、HTML タグを併用すれば自在に埋め込めます。
• 3 つのテクニック（<iframe>、画像リンク＋リンク、ショートコード）を使い分けることで、初心者でも手軽に動画を掲載できます。
• プラットフォームの制限を事前に確認し、アクセシビリティと パフォーマンスに配慮して構築することが重要です。

これで、どんな Markdown で記事を書く現場でも、動画を使った説明やデモをスムーズに行えるはず。ぜひ試してみてください！