mefody.dev

Встраивание сторонних видео, примеров кода, слайдов и так далее



Наверняка вы добавляли видео с YouTube на свои страницы. Или в своём блоге добавляли демки с CodePen. Или внутри страницы показывали PDF. Это полезно, когда нужно дать пользователю быстро что-то сделать с iframe. Но очень часто пользователь ничего с этим iframe не делает, а трафик на загрузку содержимого уже потратил. Для меня такое особенно критично либо в роуминге, либо там, где интернет медленный.



Адриан Розелли делится способом встраивать любые iframe экономно для трафика пользователей:

1. Используем атрибут srcdoc. Этот атрибут внутри себя может содержать валидный заэнкоженный HTML, который будет показываться внутри iframe при начальной загрузке. Помещаем внутрь, например, превьюшку видео.

2. Внутри этого HTML должна быть ссылка на тот контент, который вы встраиваете. По сути это та же ссылка, которую вы обычно вставляете в атрибут src. Когда пользователь кликнет на ссылку, внутри айфрейма произойдёт переход на встраиваемый контент. То есть на старте трафик экономим, но по клику даём полезное действие.

3. Настраиваем атрибуты allow, allowfullscreen и sandbox, чтобы встраиваемый контент отображался так, как нам надо, а не как он хочет.

4. На всякий случай можем ещё поверх добавить loading=lazy, чтобы внутренности srcdoc не ходили за своими ресурсами (например, картинками), пока до айфрейма не доскроллили.

5. Оформляем всё это дело в веб-компонент (так у автора статьи). Или в компонент для используемого вами фреймворка.



Атрибут srcdoc не работает в Internet Explorer, но если вы его всё ещё поддерживаете, то айфреймы вряд ли самая большая ваша проблема.



В статье есть готовые примеры HTML для YouTube (кстати, с доменом youtube-nocookie.com, не знал про такой), CodePen, PDF. И код веб-компонента youtube-embed, который можно доработать под себя.



https://adrianroselli.com/2024/01/embed-slides-youtube-videos-and-more.html