YouTube Video einbinden
Wie man mit einfachen Zeilen Code ein YouTube-Video in WordPress direkt in den Quellcode einbaut.
YouTube Video in WordPress einbauen – Quellcode
Im Beitrag zeige ich 2 Varianten und Tipp vorab: für WordPress empfehle ich den Responsive-Code.
- Code für responsive Größe: Responsiv = passt sich der Bildschirmgröße an
- Code für feste Größe: der Code von YouTube selbst – und wie man ihn anpasst
Links: ⇒ Codes als PNG-Bild | ⇒ Codes als txt-Datei
(Klick öffnet ein neues Tab im Browser)
Wichtig: Es gibt keine optimale Breite / Höhe für alle Videos.
Optimal ist das Format, das dem Originalvideo entspricht.
1. A) MODERNER RESPONSIVE CODE (mit DIV & Aspect-Ratio)
Dieser modernere Code hängt stärker daran, dass der Browser und WordPress die CSS-Eigenschaft aspect-ratio sauber akzeptieren. In normalen modernen Browsern ist das kein Problem, aber bei einem alten WordPress kann passieren, dass beim Speichern die moderne CSS-Eigenschaft aspect-ratio aus dem Inline-Style entfernt wird.
1. A) optional: vollständiger mit YouTube-allow
1. B) CODE FÜR RESPONSIVE GRÖSSE mit Padding-Trick
Das ist der klassische Legacy-Code mit dem Padding-Trick.
Er funktioniert auch in alten Browsern & Themes zuverlässiger, weil padding-bottom seit Ewigkeiten unterstützt wird.
1. B) optional: mit 2 DIV-Tags und Padding-Trick – die maximal kompatible Lösung
Noch sicherer mit 2 DIV-Tags:
Formate Aspect-Ratio und Padding-Bottom
Wenn du beim Video ein anderes Format brauchst, findest du hier eine Tabelle der gängigsten Formate:
| Format | Typische Verwendung | aspect- ratio |
padding-bottom (Legacy-Code) |
| 16:9 | YouTube, Vimeo, moderne Videos | 16 / 9 | 56.25% |
| 4:3 | alte Videos, alte TV-Formate | 4 / 3 | 75% |
| 1:1 | quadratische Bilder/Videos, Social Media | 1 / 1 | 100% |
| 9:16 | Hochformat, Shorts, Reels, TikTok | 9 / 16 | 177.78% |
| 3:2 | klassische Fotos, Kamerabilder | 3 / 2 | 66.66% |
| 2:3 | Hochformat-Fotos | 2 / 3 | 150% |
| 4:5 | Instagram-/Social-Media-Hochformat | 4 / 5 | 125% |
| 5:4 | ältere Monitor-/Bildformate | 5 / 4 | 80% |
| 21:9 | Kinoformat, ultrabreite Videos | 21 / 9 | 42.85% |
| 2:1 | breite Banner, Header, moderne Webgrafiken | 2 / 1 | 50% |
Beispiel für den Legacy-Code mit Padding-Trick
Als Beispiel, wenn du max-width auf 700px setzt und 16:9 Format wählst (padding-bottom = 56,25%), ergibt das ein responsives Video mit ungefähr 700 x 394 px.
Wenn dein Video aber eigentlich alt ist, wäre 4:3 Format besser. Das wäre padding-bottom = 75% und mit max-width auf 700px ergibt das ungefähr 700 x 525 px – allerdings wäre in dem Fall das Video knapp 130px höher.
- die Breite steuerst du mit max-width = 700px und
- das Format steuerst du mit padding-bottom = 75% bei 4:3 oder = 56,25% bei 16:9
Tool-Tipp: Seitenverhältnis-Rechner
Bei den Recherchen zu den Bildgrößen bin ich auf ein tolles kostenloses Tool gestoßen ⇒ der Seitenverhältnis-Rechner
Wenn du bei den Bildgrößen nach einem Format suchst, was nicht dem Standard entspricht und hier im Beitrag nicht enthalten ist, kannst du mit diesem Tool einfach umrechnen.
2. Code für feste Größe
Das ist der Code, den du unter dem YouTube Video für „Einbetten“ zum kopieren bekommst:
Wo finde ich diesen Code-Schnipsel auf YouTube?
Unter jedem Video auf YouTube kann man auf Teilen klicken und dann öffnet sich dieses Fenster, wenn man im Frame runter scrollt kommen die Einstellungen:
Wo finde ich die Video-Nummer auf YouTube?
Der Code ist in der URL und achte darauf, daß du keinen Parameter mit kopierst, wenn du das Video z.B. von einer Social Media Plattform oder über eine KI aufrufst.
Wie erkenne ich einen Parameter?
Ein Parameter ist alles, was in der URL nach dem Fragezeichen kommt.
Beispiel (mit Leerzeichen): https: // www . youtube . com / watch?v=cXYvemhbdGc
Die Kennzeichung des Videos ist also: cXYvemhbdGc
Weitere Bildgrößen für feste Größen in Pixel (px)
- Kleine Videos: 320 x 240
- Mittlere Videos: 480 x 360
- YT-Standard: 560 x 315
- SD Videos: 640 x 480
- HD Video: 1280 x 720
- Full HD: 1920 x 1080
- 4K (UHD): 3840 × 2160
- 8K (Full UHD): 7680 × 4320
- 16K (Quad UHD): 15360 × 8640
3 Tipps zum Code
- Cookie-Freiheit soll für YouTube durch die Änderung der URL passieren: deshalb wird im YouTube-Quellcode die URL zu www.youtube-nocookie.com, denn diese Version wird von Google empfohlen.
Die offizielle Formulierung lautet erweiterter Datenschutzmodus (Privacy Enhanced Mode). - Responsive: der HTML-Code ist so entworfen, daß das Video sich „Responsive“ an den Bildschirm des Geräts des Users anpassen soll, d.h. es soll so groß oder klein „werden“ wie der Bildschirm ist und ob es hoch oder quer ist.
- SEO: Im Quellcode könnt ihr noch den title des Videos mitgeben, das würde ich auf jeden Fall nutzen.
Beispiele, Tipps und Tricks
Hier 2 Beispiele zu den Codes sowie Tipps & Tricks.
Beispiel 1 mit Code 1A: Video mit dem Responsive-Code mit Div und Aspect-Ratio 16:9
Wenn man das Video „Bayerische Musik“ abspielt, sieht man links und rechts einen „schwarzen Balken“. Das ist weil das Video von 2008 und deshalb vom Format her kleiner ist, als heutige Standards.
Beispiel 2: Video Bayerische Musik mit der festen Größe
Bei dem Beispiel habe ich den Code von YouTube verwendet, mit den Einstellungen URL auf nocookie und die Standard-Größe gewählt: 560 x 315 px und dann schaut es Mobile einfach immer schlecht aus, weil das Video „aus dem Rahmen“ fällt:
Pro-Tipp
Weil man es eh nicht oft genug erwähnen kann: testet die Seite nach dem Einbau des Videos sowohl auf einem Rechner (Mac und Windows) sowie auf einem Handy (Android und Apple). Oft sieht es auf dem PC gut aus und Mobile ist es dann „kaputt“.
Beispiel 3: Der Trick mit der Größe – Shortcodes!
Bei manchem WordPress-Template ist ein Video automatisch „Responsive“ – weshalb man manchmal „Zwang“ anwenden muss, wenn man es in der Breite wirklich kleiner haben will: ich verwende Shortcodes als Trick, und aktuell funktioniert es für Rechner wunderbar (Mobile ist es eh Responsive) – hier ist 2/3 zu 1/3 Spalte und in der 1. Spalte ist das Video, die 2. Spalte ist „leer“.
Der Code ist der „1A“ mit 700px max. Breite und 16:9 Auflösung.
Der Trick mit dem Code: warum ich den Code hier nicht in den Beitrag einfüge
Damit Code im Beitrag als Text angezeigt und nicht ausgeführt wird, muss er „maskiert“ werden:
Wer aus solchem sichtbaren Code kopiert, kann kaputten HTML-Code einfügen.
Theoretisch „schaut“ dein kopierter Text also aus, wie „ordentlicher Code“, tatsächlich nimmst du aber solche Formatierungen mit, die z.B. auch auf WordPress verwendet werden, damit Code in einem Beitrag lesbar ist. Denn sonst würde ja z.B. das Video (statt dem Quellcode) im Beitrag erscheinen, wie bei den Beispielen.
Wer ist der Mann in dem Video und was singt er da?
Auf dem Video ist Jörg von der „besten Bauernkapelle der Welt“ Die Gipfelstürmer aus meiner Heimatstadt Neumarkt. Im Juli 2008 war ich noch als Reporterin für die Mittelbayerische Zeitung (Das Tagblatt) unterwegs. Als ich auf ein Interview warten musste, hab ich Jörg im Cafe getroffen und so sind meine ersten Videos entstanden.
Wie man eine Weißwurst richtig isst und Was ist zuzeln?
Hier noch ein Schmankerl vom gleichen Tag: Wie man eine Weißwurst richtig isst.
Und: Was ist zuzeln?
