SWELLでYouTube埋め込みがエラー153になる原因と解決策【Lazyload設定が原因だった】

SWELLでYouTubeを埋め込んだら、スマホでエラー153が表示されて再生できない。

実際のクライアント案件でこのトラブルに遭遇しました。PCでは問題なく再生できるのに、スマホだけエラーになる。原因を調べたところ、SWELLのLazyload設定が関係していました。

この記事では、エラー153の原因と解決策をスクリーンショット付きで解説します。

---

YouTubeエラー153とは？

YouTubeのエラー153は、動画の埋め込み再生ができない状態を示すエラーです。

主な原因として以下が考えられます。

• YouTubeの埋め込み許可設定がオフになっている
• ブラウザやアプリの問題
• サイト側のスクリプトが動画の読み込みに干渉している

今回のケースはPCでは再生できてスマホだけエラーになっていたため、YouTube側の設定ではなくサイト側の問題と判断しました。

---

原因はSWELLのLazyload設定だった

調査の結果、原因はSWELLのLazyload（遅延読み込み）設定にありました。

SWELLのLazyload設定には以下の3つの選択肢があります。

• 使用しない
• loading="lazy" を使用する
• スクリプト（lazysizes.js）を使って遅延読み込みさせる ← デフォルト

問題は3番目のlazysizes.jsです。このスクリプトはSWELL公式が説明しているとおり、img・video・iframeタグすべてに遅延読み込みを適用します。

YouTubeの埋め込みはiframeタグを使用しているため、lazysizes.jsの影響を受けてしまい、スマホ環境でエラー153が発生していました。

---

解決策はLazyload設定の変更

解決策はシンプルです。lazysizes.jsからloading="lazy"に変更するだけです。

手順

1. WordPress管理画面にログイン
2. 「SWELL設定」→「SWELL設定」を開く
3. 「高速化」タブをクリック
4. 「画像等のLazyload」の設定を確認
5. loading="lazy" を使用する に変更
6. 保存

変更後、スマホでYouTube動画の再生を確認してください。

ポイント： loading="lazy"はHTMLの標準属性のため、iframeへの干渉がなくYouTubeの埋め込みに影響しません。

---

同じトラブルが起きやすいケース

以下に当てはまる場合は同じトラブルが起きる可能性があります。

• SWELLのLazyload設定をデフォルトのまま（lazysizes.js）にしている
• トップページやコンテンツ内にYouTubeを埋め込んでいる
• PCでは再生できるのにスマホだけエラーになっている

SWELLを使っているサイトでYouTube埋め込みを使う場合は、最初からloading="lazy"に設定しておくことをおすすめします。

---

まとめ

• SWELLのデフォルトLazyload設定（lazysizes.js）はiframeにも適用される
• YouTubeの埋め込みiframeに干渉してエラー153が発生する
• loading="lazy"に変更することで解決できる
• YouTube埋め込みを使うSWELLサイトは最初から設定変更しておくと安心

設定1つで解決できるトラブルですが、原因にたどり着くまでに時間がかかりやすいポイントです。同じ症状で悩んでいる方の参考になれば幸いです。