От автора: я работал над простым статичным веб-сайтом, на котором видео YouTube должно отображаться прямо на целевой странице.
Итак, я пошел простым путем, перешел на YouTube, захватил код для вставки, вставил его в редактор.
Штука в том, что задача была обеспечить высокую производительность, доступность и современные методы, поэтому вы можете себе представить мое раздражение, когда я заметил, что только на этом iframe я получил это:
Плюс несколько дополнительных запросов, которые обработал мой блокировщик рекламы.
Это более 500 КБ, которые мои пользователи должны будут загрузить поверх веб-сайта, независимо от того, будут ли они смотреть видео. Есть ли у вас какие-либо идеи относительно того, как сильно это может поразить ваших пользователей, особенно тех, у кого медленное соединение или низкая производительность компьютеров? В довершение всего, их также будут отслеживать — Привет, Гугл — просто за загрузку видео, о котором они даже не подозревали.
Это был простой статичный веб-сайт, и я хотел свести к минимуму свое решение, так что вот что я придумал. Код для встраивания видео на YouTube по состоянию на август 2019 года выглядит следующим образом:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Y8Wp3dafaMQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
Так что я подумал, что если вместо реального видео я покажу только обложку, связанную с видео? Это все равно будет выглядеть как встроенное видео, но для этого потребуется только одно изображение. К счастью, у YouTube есть схема URL для миниатюр видео.
<a href="https://www.youtube.com/embed/Y8Wp3dafaMQ"> <img src="https://i3.ytimg.com/vi/Y8Wp3dafaMQ/hqdefault.jpg"> </a>
Круто, но я не хочу создавать новую страницу только для этого крошечного фрагмента кода. Что ж, нам повезло, потому что iframe имеет просто идеальную вещь — атрибут srcdoc. С его помощью вы можете получить источник iframe прямо на странице. Просто учтите, что это не сработает в Edge или IE, и что мы не можем использовать двойные кавычки.
<iframe ... srcdoc="<a href=https://www.youtube.com/embed/Y8Wp3dafaMQ><img src=https://i3.ytimg.com/vi/Y8Wp3dafaMQ/hqdefault.jpg></a>"> </iframe>
Наконец, вы заметите, что если мы нажмем на изображение, оно загрузит видео, но в состоянии паузы, и нам нужно будет кликнуть его еще раз, чтобы начать просмотр. Не беспокойтесь, потому что URL для вставки видео поддерживает параметры проигрывателя, и среди них есть переменная autoplay, которая делает именно то, что вы ожидаете. Кроме того, из-за стиля браузера по умолчанию пользователи в системах с полосой прокрутки, а не на macOS, увидят ненужную полосу прокрутки, но ничего такого, что нельзя решить небольшим сбросом CSS.
Реми Шарп отметил, что мы должны оставить за собой запасной вариант src для браузеров, которые не поддерживают srcdoc. Адриан Розелли предложил несколько настроек для улучшения доступности. Также, применяя эти предложения, я зафиксировал положение изображения, чтобы оно оставалось по центру как по горизонтали, так и по вертикали, не прибегая к background-size: cover. Спасибо, ребята, за ваш отзыв!
Вот окончательный результат:
Отдельно iframe:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Y8Wp3dafaMQ" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe>Таким образом, все пользователи должны будут загрузить предварительную версию — это изображение обложки, что мне кажется довольно разумным. Вы можете настроить это еще, например, использовать разные размеры миниатюр для разных устройств, и если вам нужен больший контроль над тем, что пользователь будет загружать и какие функции включать, вы всегда можете изучить YouTube Player API.
Если у вас есть какие-либо вопросы, замечания или предложения, не стесняйтесь комментировать ниже. Спасибо за ваше время.
Автор: Arthur Corenzan
Источник: https://dev.to
Редакция: Команда webformyself.