大東 信仁（ものくろ） 
Vimeoで動画の埋め込みを「特定のドメインのみ許可」に設定して、自分のサイトのドメインを指定した上で、埋め込んだのに再生できない。
でも、ドメイン制限を外すと再生できる。
「ドメインの入力ミス？」「プライバシー設定？」と色々疑ったのですが、原因はまったく別のところにありました。
Vimeo側の設定を見直しても問題が見つからず、途方に暮れてClaudeに相談。ドメイン設定、プライバシー設定、SSL、ブラウザのコンソールエラーなど一つずつ切り分けを進めていく中で、ページのHTMLソースにある data-src という記述にClaudeが着目。そこからようやく本当の原因に辿り着きました。
原因：WordPressテーマの「遅延読み込み（lazysizes.js）」
WordPressのテーマ（今回はArkhe）で、コンテンツの遅延読み込みの設定が「スクリプト（lazysizes.js）を使う」になっていたことが原因でした。
なぜ遅延読み込みで再生できなくなるのか
通常、Vimeoの埋め込みはこのようなHTMLになります。
<iframe src="https://player.vimeo.com/video/XXXXX"></iframe>しかし、lazysizes.jsが有効だと、テーマが自動的にこう書き換えます。
<iframe data-src="https://player.vimeo.com/video/XXXXX" class="lazyload"></iframe>src が data-src に変わり、JavaScriptが画面内に入ったタイミングで動的に読み込む仕組みです。
問題はここ。 Vimeoはドメイン制限のチェックに**リファラー（参照元URL）**を使っています。lazysizes.jsで動的に読み込むと、このリファラーが正しく送られないことがあるのです。
Vimeo側から見ると「どこのサイトから来たか分からない」＝「許可していないドメイン」と判断して、再生をブロックしてしまいます。
解決方法
WordPressテーマの設定で、遅延読み込みの方法を変更するだけです。
Arkheテーマの場合：
「外観」→「カスタマイズ」→「高速化」→「コンテンツの遅延読み込み」の項目で、以下のいずれかに変更してください。
- 「遅延読み込みをオフにする」 — 確実に解決します
- 「loading="lazy" を使う」 — ブラウザ標準の遅延読み込み。リファラーが正しく送られるので、Vimeoのドメインチェックも問題なく通ります
「スクリプト（lazysizes.js）を使う」は避けてください。 これが今回の問題の原因です。
おすすめは 「loading="lazy" を使う」 です。ページの読み込み速度を維持しつつ、Vimeoの埋め込みも正常に動作します。
なぜ気づきにくいのか
この問題がやっかいなのは、Vimeoの設定画面では何も間違っていないからです。
- ドメインは正しく入力されている ✅
- プライバシー設定も問題ない ✅
- 埋め込みコードも正しい ✅
- ドメイン制限を外すと再生できる ✅
すべて正しいのに動かない。原因がWordPressテーマ側の高速化設定にあるとは、なかなか思いつきません。
同じテーマで運用している別のサイト（lazysizes.jsを使っていない）では問題なく再生できていたので、ようやく「テーマの設定の違い」に行き着くことができました。
まとめ
| 項目 | 内容 |
|---|---|
| 症状 | Vimeo埋め込みが特定ドメイン指定で再生できない |
| 原因 | lazysizes.jsがiframeのリファラーを壊す |
| 解決策 | 遅延読み込みを「loading="lazy"」またはオフに変更 |
| 対象 | Arkhe等、lazysizes.jsを使うWordPressテーマ全般 |
Vimeoの埋め込みでドメイン制限がうまくいかないときは、テーマの遅延読み込み設定も確認してみてください。
