はじめに
WordPress の静的化ホスティングサービスである Shifter で運用しているサイトで、気がついたら 動画だけが再生されなくなる という現象に遭遇しました。自分では何も変更していないのに、既存ページの動画も含めて再生できなくなっていました。
原因は、Shifter 側で全サイトに付与されるようになったセキュリティヘッダー（CSP）でした。同じ症状で困っている方の参考になればと思い、原因と対応をまとめます。
この記事は 2026年9月ごろに筆者の環境で確認した事例です。Shifter の仕様やデフォルト設定は変わっている可能性があるので、最新の情報は Shifter 公式 もあわせて確認してください。
結論
- Shifter が全サイトのレスポンスに付けるようになった
Content-Security-Policyにmedia-srcの指定がない - そのため動画・音声は
default-src 'self'のルールで判定される - WordPress のメディアにアップロードした動画は Shifter の CDN（
cdn.getshifter.co）から配信され、サイトとは別のオリジン になるので、'self'に含まれずブロックされる - 筆者の環境では管理画面から変更できず、Shifter サポートに依頼して
media-srcを追加してもらう ことで解決した
環境
- ホスティング：Shifter
- 動画：WordPress のメディアにアップロードした mp4 を埋め込み
- 確認時期：2026年9月ごろ
起きたこと
公開中のページで、動画の枠が空のまま、またはポスター画像のまま再生されなくなりました。ページ上にはエラー表示が出ないため、見た目だけでは原因が分かりません。
ブラウザの開発者ツールでコンソールを開くと、次のエラーが出ていました。
Loading media from 'https://cdn.getshifter.co/…/xxx.mp4' violates the following Content Security Policy directive: "default-src 'self'". Note that 'media-src' was not explicitly set, so 'default-src' is used as a fallback.
原因
Shifter が全サイトにセキュリティヘッダーを付けるようになった
Shifter は 2026年4月ごろから、全サイトに CSP などのセキュリティヘッダーを標準で付与するようになりました。
media-src がないと default-src が使われる
CSP（Content-Security-Policy） は、ページがどこからリソースを読み込んでよいかをブラウザに指示するヘッダーです。リソースの種類ごとに読み込み元を指定し（画像は img-src、動画・音声は media-src など）、指定されていない種類は default-src の値で判定されます。
今回の CSP には media-src がなかったため、動画は default-src 'self' で判定されていました。
CDN の動画はサイトと別オリジン
'self' は ページと同じオリジンだけ を指します。WordPress のメディアにアップロードした動画は https://cdn.getshifter.co/... から配信されるため、サイトのドメインとは別オリジンになります。
そのため、同じ Shifter の CDN から配信されている動画であっても、'self' には含まれずブロックされていました。
解決方法
Shifter のサポートに問い合わせて、CSP に media-src を追加してもらいました。
追加してもらった値は次のとおりです。
media-src 'self' https:;
反映後、動画が再生されるようになりました。
筆者の権限では、管理画面から CSP を変更する方法は見つかりませんでした。同じ症状の場合は、まずサポートへの問い合わせを検討してみてください。
ハマりやすいポイント
何も変えていないのに壊れる
Shifter 側の変更なので、既存ページの動画もある日から再生されなくなります。デプロイのたびに起きるため、自分の変更が原因だと疑いやすいです。
見た目では気づきにくい
ページ上にエラーは出ず、動画の枠が空になるか、ポスター画像のままになるだけです。原因は開発者ツールのコンソールを開かないと分かりません。
WordPress のプレビューでは正常に見える
WordPress 上のプレビューでは問題なく、本番に公開したときだけ発生します。そのため公開前の確認ではすり抜けます。
画像は表示されるのに動画だけ出ない
CSP に img-src 'self' data: https: が指定されているので、画像は外部の CDN からでも表示されます。動画だけが壊れるので、原因の切り分けで迷いやすいです。
「自分の CDN なのに許可されていない」のが直感に反する
'self' はページと同じオリジンだけを指し、Shifter が配信している CDN のドメインは含まれません。
対応期間を見込んでおく
利用者側で変更できない場合はサポートへの問い合わせが必要です。LP の公開日が近い場合は、対応期間を見込んでおきましょう。
同じ仕組みで止まる可能性があるもの
CSP では、明示されていないディレクティブは default-src にフォールバックします。今回は media-src でしたが、指定されていない種類のリソースを外部から読み込んでいる場合は、同じ現象が起きる可能性があります。
-
<audio>の音声 -
<object>/<embed> - Web マニフェスト
確認方法
1. コンソールでエラーを確認する
開発者ツールのコンソールで、violates the following Content Security Policy directive を含むエラーが出ていないか確認します。
2. レスポンスヘッダーで CSP を確認する
curl -I https://対象サイトのドメイン/
レスポンスヘッダーの content-security-policy を見ると、どのディレクティブが不足しているか判断できます。
まとめ
- Shifter が全サイトに付けるようになった CSP に、
media-srcが指定されていなかった - Shifter の CDN から配信される動画は別オリジンのため、
default-src 'self'でブロックされる - 筆者の環境ではサポートに
media-srcの追加を依頼して解決した -
default-srcへのフォールバックは動画以外にも影響するので、外部から読み込んでいるリソースは一度確認しておくと安心
同じ症状で困っている方の参考になれば幸いです。