элемент iframe отлично отображает видео в браузерах Windows, но не отображается для IOS

#iframe #youtube

Вопрос:

Прошу поделиться моим решением, потому что я слишком долго искал, чтобы найти эту работу, и это не было простым ответом…

Итак: у меня есть видео на YouTube, встроенное на мой сайт. И он отлично работает на моей машине с Windows (Google Chrome, Edge, Firefox, все протестировано и работает). Тем не менее, когда я протестировал его в своем браузере iPhone chrome, он ничего не отображал и сделал ссылку на всю страницу обратно на домашнюю страницу. Предоставленный iframe был:

 <iframe width="560" height="315" src="https://www.youtube.com/embed/video_id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 

И, как я уже сказал, отлично отображался на компьютерах с Windows. У меня был коллега, который использовал веб-инспектор на своем Mac, чтобы проверить, не загружается ли код или что-то в этом роде, но без проблем. Код выглядел совершенно одинаково в обоих браузерах и не давал ошибок (даже межсайтовой ошибки).

Ответ №1:

После долгих проб и ошибок я пришел к этому (чрезвычайно простому) решению от EncodeDNA (https://www.encodedna.com/html5/embed-youtube-video-in-a-webpage-without-iframe.htm). Просто используйте объект вместо iframe:

 <!DOCTYPE html>
<html>
<head>
    <title>Embed YouTube Video without iFrame</title>
</head>
<body>
    <object data='https://www.youtube.com/embed/video_id?autoplay=1' 
        width='560px' height='315px'>
    </object>
</body>
</html>
 

Я подключил его, и он работал во всех браузерах, включая (и самое главное в данном случае) браузеры IOS.