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.
