Safariブラウザの埋め込み動画で発生したエラー153の修正

2025年10月末辺りからSafariブラウザでYouTubeの埋め込み動画を再生するとエラー153になる不具合が発生しました。いくつかのサイトで修正方法が紹介されていたが、私なりの方法で解決したので、メモします。

修正方法は<iframe>要素の生成方法を元から出力する形に変更しました。そうすることでmac、スマホのSafariで見られるようになりました。しかし、この方法だと動的にHTMLを生成できないのでforなどでいくつかの動画を生成する場合などでは採用しにくいです。
下記コードは公式ドキュメントから引用しました。

<!-- 修正前 -->
<div id="player"></div>

<script>
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    playerVars: {
      'playsinline': 1
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
</script>

<!-- 修正後 -->
<iframe id="existing-iframe-example"
        width="640" height="360"
        src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
        frameborder="0"
        style="border: solid 4px #37474F"></iframe>
        
<script>
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('existing-iframe-example', {
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
    });
  }
</script>

参考