Lekkie osadzanie YouTube i Vimeo: generator fasady
Wklej linki do filmów — dostaniesz gotowy blok, który pokazuje podgląd i doładowuje odtwarzacz dopiero po kliknięciu. Zero zewnętrznych bibliotek: wszystko, co potrzebne, jest w wygenerowanym kodzie.
watch?v=, youtu.be, /embed/, /shorts/, youtube-nocookie.com. Vimeo: vimeo.com/ID, player.vimeo.com/video/ID, prywatne vimeo.com/ID/HASH. Znacznik czasu ?t= / &start= jest przenoszony do fasady.
Opcjonalne uzupełnienia po pionowej kresce: URL | Tytuł | URL miniatury.
S:W albo S/W. Trafia do właściwości CSS aspect-ratio.
hqdefault istnieje dla każdego filmu. maxresdefault jest tylko tam, gdzie oryginał wgrano w 720p lub wyżej — w przeciwnym razie obrazek się po prostu nie otworzy, a widz zobaczy pusty prostokąt.
aria-label przycisku i title iframe'a.
i.ytimg.com w YouTube: zwraca go tylko API oEmbed, a zapytania do niego nie możemy wysłać — narzędzie działa bez sieci. Dlatego wgraj klatkę do biblioteki mediów witryny i wklej odnośnik. Bez niego pojawi się gradientowa zaślepka z przyciskiem play.
Wklej co najmniej jeden odnośnik, aby otrzymać kod.
Wklejać do bloku Gutenberga „Własny kod HTML”. Blok zawiera <style> i <script>: jeśli masz rolę bez uprawnienia unfiltered_html albo działa wtyczka bezpieczeństwa wycinająca skrypty — fasada pokaże miniaturę, ale kliknięcie nie zadziała.
Kod powstaje w Twojej przeglądarce. Ani wygenerowany blok, ani sam podgląd nie wykonują żadnego zewnętrznego żądania — obrazki z i.ytimg.com są w podglądzie pokazane jako adresy, a nie pobrane.
Jedno osadzone wideo kosztuje ponad megabajt jeszcze przed pierwszym kliknięciem
Standardowy iframe YouTube pobiera około 1,3 MB w kilkudziesięciu żądaniach do siedmiu obcych domen — jeszcze zanim odwiedzający zdecyduje się obejrzeć film. Na stronie z trzema filmami to trzy razy tyle i prawie zawsze właśnie to psuje wyniki szybkości na urządzeniach mobilnych. Fasada rozwiązuje problem wprost: najpierw pokazywana jest tylko miniatura z przyciskiem odtwarzania, a prawdziwy odtwarzacz wstawia się w chwili kliknięcia. Przed kliknięciem strona waży o rząd wielkości mniej. Istnieje popularna biblioteka do tego celu, ale wszystkie instrukcje radzą ładować ją z obcego CDN-a — czyli usunąć jedno zewnętrzne żądanie i dodać drugie. Tu wygenerowany kod jest w pełni samowystarczalny: style i skrypt leżą wewnątrz bloku. Dodatkowy efekt dotyczy prywatności. Standardowy iframe ustawia ciasteczka śledzące jeszcze przed obejrzeniem. Domena youtube-nocookie.com odkłada to do rozpoczęcia odtwarzania, a fasada — do kliknięcia. Dla witryn kierowanych do europejskich odbiorców dotyczy to wprost wymogów zgody na ciasteczka.