Проблемы воспроизведения встраиваемых видео с YouTube только в Safari. Создано с использованием Gatsby.

Я сталкиваюсь с несовсем стабильным воспроизведением встроенных видеороликов YouTube на своем сайте Gatsby, особенно в Safari.

Поведение в разных браузерах:
Во всех других браузерах видео на YouTube воспроизводятся автоматически и зацикливаются, как и ожидалось (например, Chrome, Firefox).

Проблема специфична для Safari:
В Safari воспроизведение иногда работает нормально в течение нескольких часов или на определенных устройствах, но в конечном итоге прекращается. Я часто вижу сообщение “войдите в систему, чтобы подтвердить, что вы не бот”, или вместо автоматического воспроизведения появляется кнопка воспроизведения.

Если я открываю только ссылку youtube.com/embed/, все работает нормально.

Используемые параметры:
Видеоролики без звука, и я настроил URL встраивания для автоматического воспроизведения и зацикливания.

Попытки решения проблемы:

• Изменил политику реферера (попробовал strict-origin-when-cross-origin и origin-when-cross-origin)
• Обновил CSP

В консоли Safari я вижу ошибки, такие как [Ошибка] Неизвестная директива Content-Security-Policy ‘require-trusted-types-for’, и некоторые файлы воспроизведения временами не загружаются, возможно, это связано с непостоянством автоматического воспроизведения.

Несмотря на эти изменения, проблема сохраняется, и я не нашел ясной закономерности в сбоях в Safari. Кто-нибудь знает, есть ли обходной путь для этого? Любая помощь будет очень ценна.

Мой компонент youtube:

import React, { useRef, useEffect, useState } from 'react';
import YouTube from 'react-youtube';

const createIntersectionObserver = (playerRef, options = {}) => {
  const defaultOptions = {
    // threshold: 0.1,
    rootMargin: '0px'
  };

  return new IntersectionObserver(([entry]) => {
    if (!playerRef.current) return;

    try {
      if (entry.isIntersecting) {
        playerRef.current.playVideo();
      } else {
        playerRef.current.pauseVideo();
      }
    } catch (error) {
      console.warn('Ошибка обработки пересечения:', error);
    }
  }, { ...defaultOptions, ...options });
};

const handleObserverCleanup = (container, observer) => {
  if (!container || !observer) return;

  try {
    observer.unobserve(container);
    observer.disconnect();
  } catch (error) {
    console.warn('Не удалось очистить наблюдатель:', error);
  }
};

const YouTubeVideo = ({ videoId, title }) => {
  const playerRef = useRef(null);
  const containerRef = useRef(null);
  const [opts, setOpts] = useState({
    width: '100%',
    height: '100%',
    enablejsapi: 1,
    playerVars: {
      autoplay: 1,
      controls: 0,
      modestbranding: 1,
      loop: 1,
      playlist: videoId,
      mute: 1,
      rel: 0,
      showinfo: 0,
      iv_load_policy: 3,
      playsinline: 1,
      cc_load_policy: 0,
      origin: window.location.origin // Явно указываем источник здесь
    }
  });

  // Эффект для параметров, зависимых от окна
  useEffect(() => {
    setOpts(prev => ({
      ...prev,
      playerVars: {
        ...prev.playerVars,
        origin: window.location.origin,
        widget_referrer: window.location.href,
      }
    }));
  }, []);
  

  // Эффект для наблюдателя пересечения
  useEffect(() => {
    const container = containerRef.current;

    if (!('IntersectionObserver' in window)) {
      console.warn('IntersectionObserver не поддерживается');
      return;
    }

    let observer;
    try {
      observer = createIntersectionObserver(playerRef);

      if (container) {
        observer.observe(container);
      }
    } catch (error) {
      console.warn('Не удалось настроить наблюдатель пересечения:', error);
    }

    return () => handleObserverCleanup(container, observer);
  }, []);

  const onReady = (event) => {
    playerRef.current = event.target;
    event.target.playVideo();
  };

  const onStateChange = (event) => {
    // Состояния плеера YouTube: -1 (не запущен), 0 (завершено), 1 (в воспроизведении), 2 (приостановлено), 3 (буферизация), 5 (видео в очереди)
    if (event.data === 0) { // 0 означает завершено
      playerRef.current.playVideo(); // перезапуск, если завершено
    }
  };

  return (
    <div ref={containerRef}>
      <YouTube
        videoId={videoId}
        title={title}
        className="video-embed-object-fit-cover youtube"
        opts={opts}
        onReady={onReady}
        onStateChange={onStateChange}
        referrerPolicy="origin-when-cross-origin"
        allowFullScreen
        playsInline
      />
    </div>
  );
};

export default YouTubeVideo;

Мой вывод iframe

<iframe src="https://www.youtube.com/embed/rnXIjl_Rzy4?autoplay=1&amp;controls=0&amp;modestbranding=1&amp;loop=1&amp;playlist=rnXIjl_Rzy4&amp;mute=1&amp;rel=0&amp;showinfo=0&amp;iv_load_policy=3&amp;playsinline=1&amp;enablejsapi=1&amp;enablejsapi=1" title="Привет, я Ян — гиперлюбопытный стратегический креативщик, работающий на стыке цифровых и физических миров, создающий увлекательные человеческие впечатления, которые находят отклик в бренде, продукте и коммуникациях." width="100%" height="100%" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" referrerpolicy="origin-when-cross-origin" playsinline=""></iframe>

Живой сайт