Leichtes Einbetten von YouTube und Vimeo: Fassaden-Generator
Fügen Sie die Links zu den Videos ein — Sie erhalten einen fertigen Block, der eine Vorschau zeigt und den Player erst nach einem Klick nachlädt. Null externe Bibliotheken: Alles Nötige steckt im erzeugten Code.
watch?v=, youtu.be, /embed/, /shorts/, youtube-nocookie.com. Vimeo: vimeo.com/ID, player.vimeo.com/video/ID, private vimeo.com/ID/HASH. Der Zeitstempel ?t= / &start= wird in die Fassade übernommen.
Optionale Angaben durch einen senkrechten Strich getrennt: URL | Titel | Vorschaubild-URL.
B:H oder B/H. Landet in der CSS-Eigenschaft aspect-ratio.
hqdefault gibt es für jedes Video. maxresdefault existiert nur dort, wo das Original in 720p oder höher hochgeladen wurde — sonst lässt sich das Bild schlicht nicht öffnen und der Zuschauer sieht ein leeres Rechteck.
aria-label der Schaltfläche und im title des iframe.
i.ytimg.com bei YouTube: sie liefert nur die oEmbed-API, und eine Anfrage dorthin können wir nicht stellen — das Werkzeug arbeitet ohne Netz. Laden Sie das Standbild daher in die Mediathek der Site hoch und fügen Sie den Link ein. Ohne ihn gibt es einen Farbverlauf-Platzhalter mit Play-Button.
Fügen Sie mindestens einen Link ein, um den Code zu erhalten.
In den Gutenberg-Block „Individuelles HTML“ einfügen. Der Block enthält <style> und <script>: Wenn Ihre Rolle die Berechtigung unfiltered_html nicht hat oder ein Sicherheits-Plugin Skripte entfernt, zeigt die Fassade zwar das Vorschaubild, der Klick funktioniert aber nicht.
Der Code entsteht in Ihrem Browser. Weder der generierte Block noch die Vorschau selbst stellen irgendeine externe Anfrage — die Bilder von i.ytimg.com werden in der Vorschau als Adressen angezeigt und nicht geladen.
Ein einziges eingebettetes Video kostet über ein Megabyte, noch vor dem ersten Klick
Ein Standard-iframe von YouTube lädt rund 1,3 MB in zwei Dutzend Anfragen an sieben fremde Domains — noch bevor der Besucher sich entschieden hat, das Video anzusehen. Auf einer Seite mit drei Videos ist es das Dreifache, und fast immer ruiniert genau das die Geschwindigkeitswerte auf Mobilgeräten. Die Fassade löst das Problem geradeheraus: Zuerst wird nur ein Vorschaubild mit Abspielknopf gezeigt, der echte Player wird erst im Moment des Klicks eingefügt. Vor dem Klick wiegt die Seite um eine Größenordnung weniger. Es gibt eine populäre Bibliothek dafür, doch alle Anleitungen empfehlen, sie von einem fremden CDN einzubinden — also eine externe Anfrage zu entfernen und eine andere hinzuzufügen. Hier ist der generierte Code vollständig eigenständig: Styles und Skript liegen innerhalb des Blocks. Ein zusätzlicher Effekt betrifft den Datenschutz. Das Standard-iframe setzt Tracking-Cookies schon vor dem Ansehen. Die Domain youtube-nocookie.com verschiebt das auf den Beginn der Wiedergabe, die Fassade auf den Klick. Für Websites mit europäischem Publikum betrifft das unmittelbar die Anforderungen an die Cookie-Einwilligung.