SafariでWebM動画が「media error」になる原因と対処法【WordPressショートコード付き】

Safari で WebM 動画を表示しようとしたとき、再生ボタンを押しても
「media error」 というエラーになってしまった経験はないでしょうか。

Chrome や Edge、Firefox では問題なく再生できているのに、Safari だけエラー。
とくに WordPress で WebM 動画を [video] ショートコードで埋め込んだときに
この症状が出やすく、「なぜ？」「どこが悪いの？」とハマりがちです。

この記事では、「safari webm エラー」 で悩んでいる方向けに、
WordPress での具体的な対処方法と、すぐに使えるショートコードのサンプルを紹介します。

なぜ Safari だけ WebM でエラーになるのか？

まず前提として、ブラウザごとに対応している動画形式・コーデックが異なります。

• Chrome / Edge / Firefox： WebM（VP8 / VP9）に対応
• Safari： WebM の対応が不完全 or 制限付きで、環境によっては再生できない

そのため、WordPress の [video] ショートコードで
以下のように webm だけを指定していると、
Safari ではその動画形式をうまく扱えず、「media error」 になってしまうことがあります。

[video width="1920" height="1080" webm="https://example.com/video.webm"][/video]

つまり、Safari で webm がエラーになる根本原因は、
Safari が WebM を安定して再生できない（または環境によって対応が不十分）という点にあります。

解決策の鉄板は「mp4（H.264）も用意して併記する」

「safari webm エラー」を確実に回避する一般的な方法は、
WebM だけではなく、H.264 コーデックの MP4 動画も用意して両方を指定することです。

多くのブラウザは、

• 再生できる形式（mp4 / webm など）から順番に試す

という動きをするため、Safari には mp4 を、Chrome などには webm をといった形で、
それぞれの得意な形式を配信できます。

WordPress のショートコード例

WordPress の [video] ショートコードを使う場合は、次のように
mp4 と webm を両方指定します。

[video width="1920" height="1080"
       mp4="https://example.com/video.mp4"
       webm="https://example.com/video.webm"]
[/video]

このように書くことで、

• Safari：mp4（H.264） を再生
• Chrome / Edge / Firefox：webm を優先的に再生（環境による）

という動作が期待でき、「safari webm エラー」問題をかなりの確率で解消できます。

実装手順：WebM から MP4 を用意する流れ

ここからは、実際に WebM の動画しか持っていない場合に、
Safari 向けの mp4 を用意して WordPress に埋め込むまでの流れをざっくり整理します。

1. WebM 動画から MP4（H.264）を作成する

動画編集ソフトや変換ツール（例：Premiere、DaVinci Resolve、HandBrake、ffmpeg など）を使って
WebM から MP4 を作成します。設定のポイントは次の通りです。

• コンテナ形式：MP4
• 映像コーデック：H.264
• 音声コーデック：AAC

Safari は H.264 + AAC の MP4 であれば再生できることが多く、
iPhone や iPad などの iOS 端末でも同じ動画ファイルを使い回せます。

2. MP4 動画を WordPress にアップロードする

作成した MP4 ファイルを、ほかの画像や WebM と同じように
「メディア」→「新規追加」 からアップロードします。

アップロード後に表示されるファイル URL（例：https://example.com/video.mp4）を、
あとでショートコードに貼り付けます。

3. WebM と MP4 を併記したショートコードに書き換える

元の WebM のみのショートコードが、仮に次のような記述だとします。

[video width="1920" height="1080" webm="https://example.com/video.webm"][/video]

これを、先ほど取得した MP4 の URL を使い、次のように変更します。

[video width="1920" height="1080"
       mp4="https://example.com/video.mp4"
       webm="https://example.com/video.webm"]
[/video]

この状態でページを更新し、Safari から再度アクセスしてみてください。
多くの場合、「media error」が消えて正常に再生できるようになります。

それでも「safari webm エラー」が出るときのチェックポイント

上記のように MP4 を追加してもまだ再生できない場合は、
次の点を順番に確認してみてください。

1. Safari で MP4 の URL を直接開いて再生できるか

Safari のアドレスバーに、MP4 ファイルの URL をそのまま貼って再生してみます。

• 例：https://example.com/video.mp4

ここで再生できない場合は、

• サーバー側の設定（MIME タイプやアクセス制限）
• ベーシック認証、IP 制限などのセキュリティ設定
• http / https の混在コンテンツエラー

など、Safari に限らない別の要因が影響している可能性があります。

2. ファイル名に全角文字やスペースが入っていないか

最近の環境では大抵問題なく動きますが、トラブルを減らすためには、
ファイル名を次のような形式にしておくのがおすすめです。

• 半角英数字・ハイフン・アンダースコアのみ
• 例：construction-movie-2025-v3.mp4

とくに WebM 側だけではなく、Safari が参照する MP4 側のファイル名も
きれいにしておくと安心です。

3. 自動再生（autoplay）やミュート設定も確認する

Safari は、音声付き動画の自動再生に制限があるため、
自動再生を狙う場合は muted 属性の有無なども影響します。

単純に「クリックして再生」の形式であれば問題になりにくいですが、
自動再生を行っているケースでは、エラーではなく Safari 側の仕様で
再生されていないだけ、ということもあります。

「safari webm エラー」は形式の併用で回避しよう

上記で紹介したポイントを簡単にまとめます。

• Safari は WebM を安定してサポートしていないため、
  WebM のみ指定だと「media error」になりやすい
• MP4（H.264）を用意して併記するのが定番の解決方法
• WordPress では [video] ショートコードに
  mp4 と webm を両方指定する

実際に使うショートコードの例は次の通りです。

[video width="1920" height="1080"
       mp4="https://example.com/video.mp4"
       webm="https://example.com/video.webm"]
[/video]

「safari webm エラー」 で悩んでいる方は、
まずはこの形でショートコードを修正してみてください。
それでも解消しない場合は、

• Safari で MP4 の URL を直接開いて再生できるか
• ファイル名やサーバー設定に問題がないか

などを順番に確認していくと、問題の切り分けがしやすくなります。

Safari 向けの動画対応は、最初に一度だけしっかり整えておくと、
今後のサイト制作でも同じノウハウをそのまま流用できるので、
この機会にぜひ押さえておきましょう。

【追記】HTMLタグ（<video>）で埋め込む場合の正しい書き方

WordPress の [video] ショートコードを使わず、純粋に HTML の
<video> タグで埋め込みたい場合もあります。その場合も考え方は同じで、
Safari 用に mp4、Chrome/Edge 用に webm を併記することが重要です。

HTML5 では、<video> 内に複数の <source> を記述し、
ブラウザが再生可能な形式を自動的に選択する仕組みがあります。

HTML版のサンプルコード（mp4 + webm）

<video width="1920" height="1080" controls playsinline>
  <source src="https://example.com/video.mp4" type="video/mp4">
  <source src="https://example.com/video.webm" type="video/webm">
  お使いのブラウザでは動画を再生できません。
</video>

このように記述することで、

• Safari → mp4（H.264）を再生
• Chrome/Edge → 再生可能であれば webm を優先

といった形で、ブラウザが自動的に適切なソースを選択してくれます。

HTML版でよく使うオプション属性

HTMLタグなら、用途に応じてさまざまな属性を追加できます。

• controls：再生・停止ボタンなどを表示
• autoplay：自動再生（※Safari では muted 必須）
• muted：音声をミュート
• loop：ループ再生
• playsinline：iPhone の全画面化を防ぎ、インライン再生

例えば「ミュート自動再生 + ループ」の動画ヘッダーを作りたい場合は次のようになります。

<video width="1920" height="1080" autoplay muted loop playsinline>
  <source src="https://example.com/video.mp4" type="video/mp4">
  <source src="https://example.com/video.webm" type="video/webm">
</video>

特に iOS Safari は自動再生に厳しいため、autoplay＋muted＋playsinline の3点セットはほぼ必須です。

WordPressとHTML版の違い・使い分け

WordPress の [video] ショートコードは便利ですが、
デザインや制御を細かく調整したい場面では HTML のほうが柔軟です。

WordPressショートコードのメリット

• 簡単に埋め込める
• テーマ側のUIと統一される
• 管理画面で編集しやすい

HTMLタグ版のメリット

• CSSやJSでの細かい制御がしやすい
• アニメーション・背景動画など高度なデザイン向け
• ループ・ミュート・自動再生などを柔軟に設定可能

動画の見せ方にこだわりたい場合や、LP制作・ヘッダービジュアルなどでは
HTML 版のほうが圧倒的に自由度が高いです。

まとめ：HTML版でも「mp4＋webm の併記」でSafari対策は必須

WordPress のショートコード版と同様、HTML タグで動画を直接埋め込む場合も、
Safari に必須の mp4（H.264）＋ webm の両方を用意することが重要です。

特に「safari webm エラー」で悩んでいる場合は、この HTML 記述での二重指定が
もっとも効果的な解決になります。

実務では、LP や背景動画 → HTML版、通常記事や投稿 → ショートコード版
と使い分けると制作が効率的です。

両方の形式を押さえておくことで、Safari の動画再生トラブルにも強い
安定した Web サイト構築が可能になります。

　
※参考にされる場合は自己責任でお願いします。