Событие Click не запускается через youtube iframe в мобильном сафари

Поэтому я немного поиграл с iframe API и нашел решение. Это немного хакерски... но не совсем. Когда пользователь нажимает на видео, чтобы воспроизвести его, document.activeElement становится iframe. Когда пользователь нажимает кнопку «Готово», файл document.activeElement === document.body. Поэтому, когда видео начинает воспроизводиться, мы периодически проверяем, возвращается ли активный элемент в тело. На тот момент единственным решением, которое я нашел, было перерисовать iframe. В этом примере я уничтожаю () видео и воссоздаю его с помощью API iframe. Я также попытался клонировать iframe и успешно заменить его (я оставил этот код там, чтобы вы могли его увидеть):

http://jsfiddle.net/ryanwheale/SwGH5/105/

Это не лучшее решение, но оно работает. Кроме того, чтобы объяснить, что [я думаю] происходит - iOS перехватывает любой видеоконтент (Safari или Chrome) и воспроизводит его с помощью собственного видеоплеера. Любая функциональность ОС, подобная этой, выполняется «поверх» браузера, если хотите, - выше, чем любой z-индекс ... полностью вне браузера. Когда пользователь нажимает «Готово», собственный проигрыватель как бы уменьшает масштаб, как будто он повторно имплантирует себя на страницу. Я думаю, что родной проигрыватель все еще висит «над» браузером... что делает все, что находится под ним, недоступным. Тот факт, что кнопка кажется сверху, просто аномалия... из-за отсутствия лучшего описания.

РЕДАКТИРОВАТЬ: решение Райана Уила является лучшим решением этой проблемы и будет работать в большинстве случаев.

Из документации Apple:

На устройствах под управлением iOS с небольшими экранами, таких как iPhone и iPod touch, видео всегда воспроизводится в полноэкранном режиме, поэтому холст нельзя наложить на воспроизводимое видео. На устройствах под управлением iOS с большими экранами, таких как iPad, вы можете накладывать графику на холсте при воспроизведении видео так же, как на настольном компьютере.

То же самое относится и к воспроизводимому видео. В в этой статье четко указано, что это невозможно.

Обходной путь:

Вы можете отсоединить и снова прикрепить элемент iframe к webkitfullscreenchange. Но для иностранного iframe это не сработает. Браузер не позволит вам манипулировать iframe DOM bec. междоменной политики. И даже если бы это было так, вы все равно могли бы скрыть наложение видео, чтобы добраться до своей кнопки.

Поэтому единственным решением является отслеживание состояния YT.PlayerState.ENDED через YouTube iFrame API, а затем уничтожить и заново создать проигрыватель. Но не волнуйтесь, он играет плавно.

window.onYouTubeIframeAPIReady = function () {
    var video = {
        player: null,
        create: function () {
            // first destroy if we already have the player
            if (video.player) { video.player.destroy(); }
            // create the player
            video.player = new YT.Player('ytp', {
                videoId: '9u_hp7zPir0',
                width: '620',
                height: '290',
                events: {
                    'onStateChange': video.onStateChange
                }
            });
        },
        onStateChange: function (event) {
            // YT.PlayerState.ENDED » exiting full screen
            if (event.data === 0) { video.create(); }
        }
    };
    video.create();
};

Вот рабочая скрипка.

Если вы не можете заставить его работать с обычным iframe, вы можете рассмотреть возможность использования mediaelement.js, который может обернуть API Youtube в оболочку HTML5 Media API. Это прекрасно работает в Safari на iOS — попробуйте пример YouTube на mediaelementjs.com.

Все, что вам нужно сделать, это добавить mejs js/css и поместить ваше видео на YouTube в качестве источника в тег видео, вот пример разметки, взятой с mediaelementjs.com:

<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<video width="640" height="360" id="player1" preload="none">
    <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>

Затем запустите плеер так:

jQuery(document).ready(function($) {
    $('#player1').mediaelementplayer();
});

Если вы хотите добавить свою кнопку поверх проигрывателя mejs, она будет работать нормально, просто установите достаточно высокий z-индекс. Если вам нужна обычная кнопка воспроизведения, вы также можете подумать о стилизации существующей, которая поставляется с mejs.

Судя по комментариям к ответу @CullenJ, возможно, это может быть связано с некоторой проблемой в браузеры устройств iOS не запускают событие click для элементов iframe. В этом случае вам придется перейти с:

document.getElementById('btn').onclick = function() {
    alert('clicked');
}

Что-то вроде этого (как ответил @smnh):

$('#btn').on('click tap touchstart', function() {
    alert('clicked');
});