HTML video i osadzanie iframe, które ładują się szybko
Generator kodu HTML video i iframe
HTML video i iframe: autoplay, napisy, responsywne osadzanie | We.Inc
Jak używać znacznika video (autoplay, muted, playsinline, poster), dodawać napisy przez track, zbudować wideo w tle sekcji hero, osadzać YouTube lub Vimeo responsywnie i leniwie, a do tego generator kodu osadzenia.
Dla własnych plików użyj elementu video: <video src="clip.mp4" controls playsinline preload="metadata" poster="still.jpg">. Autoplay działa tylko razem z muted. Dla YouTube lub Vimeo użyj iframe z loading="lazy", atrybutem title i aspect-ratio: 16 / 9 dla responsywnego rozmiaru. Generator poniżej napisze za Ciebie jedno albo drugie.
Atrybuty video, po które sięgniesz
Atrybut
Efekt
Pokazuje przeglądarkowe kontrolki odtwarzania, głośności i pełnego ekranu
autoplay muted
Zaczyna odtwarzanie po załadowaniu; większość przeglądarek wymaga do tego muted
Odtwarza na iPhonie wewnątrz strony zamiast na pełnym ekranie
Zaczyna od nowa po zakończeniu
Obraz pokazywany przed rozpoczęciem odtwarzania
none, metadata lub auto: ile pobrać z wyprzedzeniem
Wybierz źródło w generatorze, przełącz opcje i skopiuj kod, który zawiera już atrybuty, o których ludzie zapominają: playsinline dla iPhone'ów, title na iframe dla czytników ekranu, YouTube w trybie zwiększonej prywatności i ramkę 16:9, która nigdy się nie spłaszcza. Sekcje poniżej omawiają napisy, wideo w tle, sandboxing i fasadę ładowaną po kliknięciu, która trzyma ciężkie odtwarzacze z dala od pierwszego renderu.
Wybierz YouTube, Vimeo, plik hostowany samodzielnie lub dowolny inny URL iframe.
Wklej ID wideo lub ścieżkę pliku i wybierz autoplay, zapętlenie, kontrolki i czas startu.
Zostaw włączone responsywność i leniwe ładowanie, chyba że masz powód, by je wyłączyć.
Skopiuj kod i wklej go na swoją stronę lub do bloku HTML w kreatorze stron.
Nadaj każdemu iframe atrybut title opisujący jego zawartość. Czytniki ekranu ogłaszają go, gdy użytkownik dotrze do ramki.
Ustaw preload="none" dla filmów daleko na stronie lub preload="metadata", jeśli chcesz pokazać czas trwania bez pobierania klipu.
Przekoduj wideo w tle bez ścieżki audio. Cichy strumień jest mniejszy, a wymóg muted przestaje mieć znaczenie.
iframe z loading="lazy", który jest już na pierwszym ekranie, i tak ładuje się od razu, więc ten atrybut jest bezpieczny niemal na każdej ramce.
Zawsze zapewnij kontrolki lub widoczny przycisk pauzy dla ruchu trwającego dłużej niż pięć sekund, zgodnie z WCAG 2.2.2.
Najczęściej zadawane pytania
Dlaczego moje wideo nie odtwarza się automatycznie?
Przeglądarki blokują autoplay z dźwiękiem. Dodaj muted obok autoplay oraz playsinline dla iPhone'ów. Tryby oszczędzania danych i niektóre ustawienia użytkownika mogą nadal to blokować, więc zaprojektuj stronę tak, aby działała z samym obrazem poster.
Jak sprawić, by osadzony YouTube był responsywny?
Usuń sztywne style szerokości i wysokości i nadaj iframe width: 100%; height: auto; aspect-ratio: 16 / 9. Właściwość aspect-ratio utrzymuje wysokość w proporcji do szerokości na każdym rozmiarze ekranu, zastępując stary kontener z padding-bottom: 56.25%.
Co robi youtube-nocookie.com?
To tryb zwiększonej prywatności YouTube. Według YouTube informacje o oglądaniu nie są używane do personalizacji przeglądania widza, dopóki nie odtworzy on filmu. Poza tym osadzenie działa tak samo; wystarczy zamienić domenę w src.
Co robi atrybut sandbox na iframe?
Pusty atrybut sandbox nakłada wszystkie ograniczenia: brak skryptów, formularzy, wyskakujących okien, nawigacji najwyższego poziomu i unikalne origin. Potem przywracasz tylko to, czego ramka potrzebuje, tokenami takimi jak allow-scripts czy allow-forms. Przy niezaufanych treściach unikaj łączenia allow-scripts z allow-same-origin.
Jak dodać napisy do wideo?
Napisz plik WebVTT z czasowymi wpisami i dodaj <track kind="captions" src="captions.vtt" srclang="en" label="English" default> wewnątrz elementu video. Przeglądarka doda menu napisów do swoich kontrolek. Plik musi być serwowany z tego samego origin lub z CORS.
Dlaczego fasada wygrywa z surowym osadzeniem odtwarzacza
iframe YouTube lub Vimeo ładuje własne skrypty, style i fonty, gdy tylko się wyrenderuje, zanim ktokolwiek naciśnie play. Na stronie z kilkoma osadzeniami ten ciężar spada na każdego odwiedzającego, a większość z nich nigdy nie ogląda.
Fasada pokazuje miniaturę i przycisk odtwarzania, a prawdziwy iframe podstawia dopiero po kliknięciu. Lighthouse wymienia ten wzorzec w audycie fasad dla zasobów zewnętrznych. Kod poniżej robi to w kilku linijkach bez żadnej biblioteki.
Wideo w tle sekcji hero zrobione odpowiedzialnie
Klip powinien być krótki, bez dźwięku i skompresowany. Ustaw poster, aby od razu coś się wyświetlało, i umieść tekst na ciemnej nakładce, aby kontrast nie zależał od klatki. Ukryj wideo dla czytelników, którzy proszą o ograniczenie ruchu, i pozwól, by projekt niósł sam poster.
Element video
Klip produktowy ze źródłami i posterem
Przeglądarka odtwarza pierwsze obsługiwane źródło, więc podaj mniejszy, nowszy format jako pierwszy. Akapit w środku wyświetla się tylko w przeglądarkach bez żadnej obsługi wideo.
Napisy z track i WebVTT
Dołączanie plików z napisami
kind="captions" obejmuje efekty dźwiękowe i nazwy mówców; kind="subtitles" służy do tłumaczeń. default włącza pierwsze z nich.
Plik zaczyna się od WEBVTT, potem następują wpisy z czasem początku i końca, a po nich tekst. Serwuj go z typem treści text/vtt.
Wideo w tle sekcji hero z wariantem zapasowym
Wyciszone, zapętlone hero z wariantem dla ograniczonego ruchu
Poster i tło sekcji hero korzystają z jednego obrazu, więc hero wygląda dobrze przed załadowaniem wideo i gdy jest ono ukryte z powodu ograniczenia ruchu.
Atrybuty iframe, które mają znaczenie
Atrybuty iframe i kiedy ich używać
Atrybut
Przykład
Cel
title="Store location map"
Dostępna nazwa ramki
loading="lazy"
Odracza ładowanie ramek poza ekranem, aż użytkownik do nich przewinie
sandbox="allow-scripts allow-forms"
Ogranicza, co może robić strona w ramce
allow="autoplay; fullscreen; picture-in-picture"
Przyznaje ramce funkcje przeglądarki
Pozwala odtwarzaczowi przejść na pełny ekran (starszy odpowiednik allow="fullscreen")
referrerpolicy="strict-origin-when-cross-origin"
Ogranicza to, czego osadzona witryna dowiaduje się o URL strony
width / height
width="560" height="315"
Rezerwuje miejsce przed załadowaniem; nadpisz w CSS
Responsywne osadzenie YouTube 16:9
aspect-ratio utrzymuje kształt ramki przy każdej szerokości. Domena nocookie to tryb zwiększonej prywatności YouTube.
Widżet zewnętrzny w sandboksie
Przywrócone są tylko skrypty i wysyłanie formularzy. Ramka nie może otwierać wyskakujących okien ani nawigować Twojej strony.
Fasada YouTube ładowana po kliknięciu
Najpierw miniatura, odtwarzacz po kliknięciu
Dopóki ktoś nie kliknie, strona ładuje jeden obraz miniatury zamiast pełnego odtwarzacza. Przycisk zapewnia dostępność z klawiatury.
Formaty i budżet rozmiaru
Formaty wideo w sieci (sprawdź w caniuse dokładne wersje używane przez Twoich odbiorców)
Kontener i kodek
Obsługa
Do czego
MP4, wideo H.264, audio AAC
Każda aktualna główna przeglądarka
Bezpieczne źródło domyślne i zapasowe
WebM, VP9
Wszystkie aktualne główne przeglądarki
Mniejsze pliki przy podobnej jakości; podaj przed MP4
MP4 lub WebM, AV1
Najnowsze wydania głównych przeglądarek; sprawdź w caniuse
Najmniejsze pliki, wolniejsze kodowanie
Animowany GIF
Wszędzie
Unikaj przy czymkolwiek dłuższym niż sekunda lub dwie; wyciszony MP4 jest znacznie mniejszy
Kompresja klipu hero za pomocą ffmpeg
Nasze cele robocze: 720p lub 1080p, bez dźwięku, poniżej dziesięciu sekund i najwyżej kilka megabajtów. -an usuwa dźwięk, -movflags +faststart pozwala zacząć odtwarzanie przed pobraniem całego pliku.
Plik wideo
Inny iframe
Generator kodu osadzenia
Źródło
ID wideo lub URL
Ścieżka pliku wideo
URL iframe
Tytuł (odczytywany przez czytniki ekranu)
Obraz poster (opcjonalnie)
Start od (sekundy)
Autoplay (wyciszony)
Zapętlenie
Kontrolki
Nie śledź (dnt=1)
Zwiększona prywatność (nocookie)
Leniwe ładowanie
Responsywne 16:9
Sandbox
Automatycznie odtwarzany ruch bez kontrolek: dodaj własny przycisk pauzy, aby odwiedzający mogli go zatrzymać.