Zo gebruikt u de video-tag (autoplay, muted, playsinline, poster), voegt u ondertitels toe met track, bouwt u een achtergrondvideo voor de hero en sluit u YouTube of Vimeo responsive en lazy in, plus een bouwer voor embedcode.
Gebruik voor uw eigen bestanden het video-element: <video src="clip.mp4" controls playsinline preload="metadata" poster="still.jpg">. Autoplay werkt alleen in combinatie met muted. Gebruik voor YouTube of Vimeo een iframe met loading="lazy", een title en aspect-ratio: 16 / 9 voor responsive afmetingen. De bouwer hieronder schrijft beide voor u.
Video-attributen die u vaak nodig hebt
Kies een bron in de embedbouwer, zet de schakelaars om en kopieer markup die al de attributen bevat die mensen vergeten: playsinline voor iPhones, een title op de iframe voor schermlezers, YouTube in privacymodus en een 16:9-vak dat nooit samengedrukt wordt. De secties hieronder behandelen ondertitels, achtergrondvideo's, sandboxing en een klik-om-te-laden-facade die zware spelers buiten de eerste paint houdt.
Browsers blokkeren autoplay met geluid. Voeg muted toe naast autoplay, en playsinline voor iPhones. Databesparingsmodi en sommige gebruikersinstellingen kunnen het nog steeds blokkeren, dus ontwerp de pagina zo dat ze ook met alleen de posterafbeelding werkt.
Verwijder de vaste breedte en hoogte en geef de iframe width: 100%; height: auto; aspect-ratio: 16 / 9. De eigenschap aspect-ratio houdt de hoogte op elk schermformaat gelijk op met de breedte en vervangt de oude wrapper met padding-bottom: 56.25%.
Het is de privacymodus van YouTube. Volgens YouTube wordt kijkinformatie niet gebruikt om het surfgedrag van de kijker te personaliseren totdat die de video afspeelt. Verder werkt de embed hetzelfde; vervang het domein in de src.
Een leeg sandbox-attribuut past elke beperking toe: geen scripts, geen formulieren, geen pop-ups, geen navigatie van de bovenste pagina en een unieke origin. Daarna voegt u alleen terug wat het frame nodig heeft met tokens zoals allow-scripts of allow-forms. Combineer allow-scripts niet met allow-same-origin voor onbetrouwbare content.
Schrijf een WebVTT-bestand met getimede cues en voeg <track kind="captions" src="captions.vtt" srclang="en" label="English" default> toe binnen het video-element. De browser voegt een ondertitelmenu toe aan de bedieningselementen. Het bestand moet vanaf dezelfde origin of met CORS worden geleverd.
De browser speelt de eerste bron af die hij ondersteunt, dus zet het kleinere, nieuwere formaat bovenaan. De alinea binnenin verschijnt alleen in browsers zonder enige video-ondersteuning.
kind="captions" bevat geluidseffecten en namen van sprekers; kind="subtitles" is voor vertaling. default zet de eerste aan.
Het bestand begint met WEBVTT, gevolgd door cues met begin- en eindtijd en daarna tekst. Lever het met het content type text/vtt.
De poster en de achtergrond van de hero delen één afbeelding, zodat de hero er goed uitziet voordat de video laadt en wanneer die verborgen is voor minder beweging.
Iframe-attributen en wanneer u ze gebruikt
aspect-ratio houdt het frame bij elke breedte in vorm. Het nocookie-domein is de privacymodus van YouTube.
Alleen scripts en het versturen van formulieren worden weer toegestaan. Het frame kan geen pop-ups openen en uw pagina niet laten navigeren.
Totdat iemand klikt, laadt de pagina één thumbnail in plaats van de volledige speler. De knop houdt het toegankelijk met het toetsenbord.
Videoformaten voor het web (controleer op caniuse de exacte versies die uw publiek gebruikt)
Onze werkdoelen: 720p of 1080p, geen audio, korter dan tien seconden en hooguit een paar megabytes. -an verwijdert de audio, -movflags +faststart laat het afspelen beginnen voordat het bestand helemaal gedownload is.
Videobestand
Andere iframe
Bouwer voor embedcode
Bron
Video-ID of URL
Pad naar videobestand
Iframe-URL
Titel (voorgelezen door schermlezers)
Posterafbeelding (optioneel)
Starten bij (seconden)
Autoplay (gedempt)
Herhalen
Bedieningselementen
Niet volgen (dnt=1)
Privacymodus (nocookie)
Lazy laden
Responsive 16:9
Sandbox
Automatisch afspelende beweging zonder bedieningselementen: voeg een eigen pauzeknop toe zodat bezoekers het kunnen stoppen.
Markup
Code kopiëren
Productrondleiding
Gratis beginnen · Geen creditcard nodig