JS YouTube Embed несовместим в разных версиях iOS

Question

Итак, я работаю над мобильным сайтом, на котором есть несколько видео.Я использую предоставленный YouTube API для переключения между flash и HTML5 на разных устройствах, но я использую собственные эскизы для них по нескольким причинам.

Я использую некоторый JavaScript, чтобы скрыть iframe YouTube, пока пользователь не щелкнетна изображении, а затем он должен поменять изображение для видео на клике, вызвав метод switchItUp.

        var video = document.getElementById("VideoID");
        var image = document.getElementById("PlaceholderImage");
        video.style.display = "none";

        function switchItUp() {
            var video = document.getElementById("VideoID");
            var image = document.getElementById("PlaceholderImage");
            image.style.display = "none";
            video.style.display = "block";
        }

Код YouTube, как указано в API, выглядит следующим образом (иработает только на одной странице):

<iframe src="http://www.youtube.com/embed/BaKcl0Qg13o?autoplay=1" width="300" height="190"></iframe>

Вот самое интересное.

• Это прекрасно работает в Safari на 4.0.
• В 4.1 onClick показывает видео, но вы не можете его воспроизвести.
• В 4.2 видео не работаетвообще не показывается, но оставляет гигантское пустое пространство на странице, когда изображение скрывается.

Отлично работает во всех браузерах настольных ПК, поэтому отладка - это проблема.

Любая помощь приветствуется!TYIA!

---

РЕДАКТИРОВАТЬ: Плеер должен быть включен автозапуск, чтобы своп работал в 1 клик, поэтому он должен начинаться с дисплея: ни одного на странице.

Кроме того, контейнер будет вызывать эту проблему?В настоящее время он рендерится внутри <span> на странице, которая не имеет display: блок установлен перед отображением: none.

Answer 1

Поскольку автозапуск не работает в 4.2, мы решили избавиться от замены миниатюр.Нет способа сделать это, работающего на всех версиях iOS.Поэтому мы просто используем несколько миниатюр, созданных на YouTube.

Answer 2

Попробуйте скрыть видео, поместив его за пределы экрана, а не display=none.Это классическое решение этой проблемы.

video.style.position = 'absolute';
video.style.top = '-10000px';
video.style.left = '-10000px';

Тогда вы можете «показать» это с помощью

video.style.position = 'static'