解決！iOSのみWordPressで埋め込んだYouTube動画がエラー153で表示されない件

2025年11月5日

当サイトには広告が含まれています。

特定のiPhone/iPadで見る時だけ、youtubeのサムネイルの部分が黒い画面になって「エラー153」と表示される現象が発生しています。パソコンでは問題ないです。

つい先日までは絶対こんなことなってなかった。なのに突然エラーが出る仕様になる。
外部サービスを使っている以上はこういうことになっても仕方ないのはわかるけど、かなりの大迷惑。

色々調べたところ遅延読み込みをloading="lazy"にすることで問題を解消できましたので、ここにコードを記しておきます。

ちなみに他のサイトで見た解決策（no-cookieのURLを使用する等）は全く通じなかったです。
ですので以下のJavascriptでゴリ押し解決したということです。

SWELLテーマを使用している場合

SWELLを使用している方は、SWELL設定＞遅延読み込み機能から、loading="lazy"を使用するを選択して保存してください。
おそらく大体はこれで解決できるはずです。

それ以外のテーマの場合

以下のjsをサイトに追加してみてください。

具体的なコード

JavaScript

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('iframe.lazyloaded').forEach(function(iframe) {
    iframe.classList.remove('lazyloaded');
  });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('iframe.lazyloaded').forEach(function(iframe) {
    iframe.classList.remove('lazyloaded');
  });
});
</script>

これは「loading="lazy" は残したいけど class="lazyloaded" だけ消したい」というコードになります。
youtubeの埋め込みコードを使用したら勝手にclass="lazyloaded"が付与されるのですが、こいつが悪さの原因ですので、jsで無理やり除外している次第です。

これで改めてiPhoneなどiOSのモバイルデバイスから表示のチェックをしてみてください。私は解消できました。

注意点

他のLazyloadプラグインなどを使用していると競合してエラー解消にならない場合があります。そういった場合はプラグインの設定などでyoutube.comを除外するなどの設定をしてみてください。

例：Autoptimize の場合

管理画面 → 設定 > Autoptimize > 画像
「Lazy-load images?」をオンにしている場合 → 下にある
「Exclude images/iframes containing」 の欄にこれを追加： youtube.com, youtu.be
保存＆キャッシュ削除。

以上