Есть ли возможность принудительно воспроизводить видео (например, Youtube) в IFrame на мобильных устройствах?

Question

Обсуждается, что автозапуск не работает на мобильных устройствах Apple, а также на Android ( Автозапуск Youtube не работает на мобильных устройствах со встроенным проигрывателем HTML5 ).

Однако, чтобы не снижать производительность моего веб-сайта, я только загружаю изображения и добавляю IFrames, как только пользователь нажимает кнопку, как показано в этом руководстве (https://lean.codecomputerlove.com/make-your-own-lightweight-youtube-player/).

Основная идея - добавить только HTML с атрибутом данных и изображением:

    <div class="video__youtube" data-youtube>
        <img src="https://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg" class="video__placeholder" />
        <button class="video__button" data-youtube-button="https://www.youtube.com/embed/VIDEO_ID"></button>
    </div>

А позже добавьте IFrame через JavaScript, как только пользователь нажмет:

function createIframe(event) {
    var url = event.target.dataset.youtubeButton;
    var youtubePlaceholder = event.target.parentNode;

    var htmlString = '<div class="video__youtube"> <iframe class="video__iframe" src="' + url + '?autoplay=1" frameborder="0" allowfullscreen></iframe></div>';

    youtubePlaceholder.style.display = 'none';
    youtubePlaceholder.insertAdjacentHTML('beforebegin', htmlString);
    youtubePlaceholder.parentNode.removeChild(youtubePlaceholder);
}

Однако, поскольку автозапуск Youtube не работает на мобильных устройствах , пользователь должен нажать два раза для того же действия, что недопустимо с точки зрения взаимодействия с пользователем. Поэтому моя идея состоит в том, чтобы вызвать щелчок внутри IFrame, как только он будет загружен (, поскольку пользователь уже нажал ). Есть ли возможность этого добиться?

Answer 1

Я не уверен, работает ли он, когда задний элемент является iframe, но вы можете попробовать свойство css pointer-events: none.

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

Итак, iframe будет там с самого начала, но будет покрыт изображением, вместо того, чтобы вставлять его после щелчка по изображению.

https://css -tricks.com / almanac / properties / p / pointer-events / проверьте этот пример, вы нажимаете div перед другим.