WordPress: YouTube Video in richtiger Größe anzeigen

Nico Serapins

Nico Serapins

Gründer von TutorialCenter

Zuletzt aktualisiert: März 10, 2022

Diesen Beitrag teilen

Share on linkedin
Share on facebook
Share on twitter

Hier zeigen wir dir, wie du unter WordPress eingebettete Inhalte wie YouTube Videos in richtiger Größe darstellen kannst. Wenn du das Problem hast, dass im WordPress Editor ein Video viel zu groß ist und auch im Design viel breiter als der eigentliche Inhalt ist, dann haben wir hier die Lösung für dich parat.

So passt du die Größe eines eingebetteten YouTube Video in WordPress an

Nachfolgend zeigen wir dir zwei Möglichkeiten, wie du die Größe eines eingebetteten YouTube Videos in WordPress anpassen kannst. Normalerweise muss dies nämlich bereits im Theme (Design) integriert sein, doch nicht immer ist dies der Fall.

[index]

[schritt a]

Möglichkeit 1: Breite des Inhalts vom WordPress Theme definieren

if ( ! isset( $content_width ) ) $content_width = 650; // Definiert die Breite des eingebetten YouTube Video

Diesen Code musst du in die functions.php deines aktiven WordPress Theme kopieren. Die Zahl musst du dabei entsprechend der Breite deines Design anpassen. Wenn diese also kleiner oder größer ist, dann ändere den Wert entsprechend.

[/schritt][schritt b]

Möglichkeit 2: Standardwerte für YouTube Videos ändern

Eine zweite Möglichkeit besteht darin die Standardwerte zum Einbetten von Inhalten zu ändern. Auch dieser Code muss entsprechend in die functions.php eingetragen werden (alternativ kannst du natürlich auch ein neues Plugin dazu nutzen. Hierbei kannst du nicht nur eine Breite festlegen, sondern auch eine Höhe. Dadurch werden in WordPress die Inhalte, bspw. von Twitter und YouTube entsprechend dieser neuen Werte eingebunden.

add_filter( 'embed_defaults', 'tutorialcenter_change_embedsize' );
function tutorialcenter_change_embedsize() {
return array(
'width' => 650 // Stelle hier die Breite des Videos ein
// Optional kann mit 'height' => 300 auch die Höhe angepasst werden
// Ansonsten wird dies, so wie in diesem Code-Beispiel, automatisch gesetzt
);
}

via wordpress.org

[/schritt]

iFrame Größe anpassen

Nachdem du entweder über die Breite des Inhalts oder die eingebetteten Inhalte die Größe von YouTube Videos in WordPress definiert hast, solltest du aber auch darauf achten, dass das YouTube Video ein responsives Verhalten hat. Wenn also eine Person mit Smartphone auf die Seite geht, so sollte das Video entsprechend nicht immernoch 650 Pixel breit sein, sondern entsprechend schmaler.

Die einfachste Möglichkeit diesbezüglich ist ein einfacher CSS-Code. Füge dazu einfach in deine style.css oder andere CSS-Datei folgenden Eintrag ein:

iframe {width: 100%}

Damit legst du fest, dass das Video 100 Prozent der Breite des Inhalts einnehmen soll. Eine Alternative stellt FitVids.js dar, ein kleines, einfach zu verwendes jQuery Plugin, um die Breite von eingebundenen Videos automatisch anzupassen. Auch in WordPress Seiten kann dieses JavaScript-Plugin integriert werden.

Von nun an sollten Videos von YouTube korrekt auf deiner WordPress Seite angezeigt werden und auch im TinyMCE Editor in der richtigen Größe dargestellt werden.

Nico Serapins

Nico Serapins

Nico Serapins brennt dafür, technische Themen auf eine einfache und verständliche Weise zu erklären, um Menschen einen unkomplizierten Zugang zur digitalen Welt zu ermöglichen. Seit 2012 betreibt er erfolgreich seinen YouTube-Kanal TutorialCenter mit mehr als 100.000 Abonnenten und hat sich als gefragter Erklär-Video-Moderator sowie Experte im Bereich Video Content Marketing etabliert. Mit seinem klaren Fokus darauf, komplexe Inhalte verständlich zu machen, bringt er jedes Thema auf den Punkt. Nico hat Medienmanagement studiert und ist Gründer mehrerer Unternehmen, die Innovation und digitale Kommunikation vorantreiben. Seine Inhalte erreichen mehr als 50 Millionen Menschen.

📖 Inhaltsverzeichnis

Kooperationsanfrage?

Wir sind offen für Kooperationsanfragen oder setzen Tutorials für Dein Unternehmen um. 

nico@tutorialcenter.tv

Probleme mit Technik? Wir helfen Dir!

Ihre Anmeldung konnte nicht gespeichert werden. Bitte versuchen Sie es erneut.
Deine Anmeldung war erfolgreich.
Wir verwenden Brevo als unsere Marketing-Plattform. Wenn Sie das Formular ausfüllen und absenden, bestätigen Sie, dass die von Ihnen angegebenen Informationen an Brevo zur Bearbeitung gemäß den Nutzungsbedingungen übertragen werden