Wie man die maximale Breite von oEmbed in WordPress einstellt (4 einfache Methoden)

Möchten Sie die Breite von oEmbeds in WordPress begrenzen?

WordPress bettet Inhalte Dritter wie YouTube-Videos und Tweets automatisch ein. Manchmal können die Einbettungen jedoch zu breit werden und das Design Ihrer Website ruinieren.

In diesem Artikel zeigen wir Ihnen, wie Sie die maximale Breite von oEmbed in WordPress einstellen, damit Sie mehr Kontrolle über das Layout Ihrer Website haben.

Warum sollte man die maximale Breite von OEmbed in WordPress festlegen?

WordPress unterstützt oEmbed, mit dem Sie automatisch Inhalte von Websites Dritter einbetten können. So können Sie zum Beispiel YouTube-Videos, SlideShare-Präsentationen, Tweets und viele andere Arten von Inhalten einbetten.

Diese Inhalte werden nicht auf Ihrem Server gehostet, so dass sie Ihre Website nicht verlangsamen. Vor allem sollten Sie immer Technologien wie oEmbed verwenden und niemals ein Video in WordPress hochladen.

Hinweis: Obwohl Facebook und Instagram in der Vergangenheit beide oEmbed unterstützt haben, hat Meta die Unterstützung für oEmbed inzwischen eingestellt. Eine schrittweise Anleitung zur Reparatur dieser Funktion finden Sie in unserer Anleitung zur Behebung des Facebook- und Instagram-oEmbed-Problems in WordPress.

WordPress versucht immer, die Breite des eingebetteten Inhalts so anzupassen, dass er perfekt in den verfügbaren Platz passt. Manchmal kann es jedoch vorkommen, dass der eingebettete Inhalt zu breit ist und die anderen Inhaltsbereiche Ihrer Website überlappt.

Leider können Sie mit den integrierten WordPress-Tools keine maximale Breite für Einbettungen von Drittanbietern festlegen.

Sehen wir uns also an, wie Sie diese fehlende Funktion hinzufügen und eine maximale oEmbed-Breite in WordPress festlegen können. Verwenden Sie einfach die unten stehenden Links, um direkt zu der Methode zu gelangen, die Sie verwenden möchten:

Methode 1: Verwendung des Embed Shortcodes (am besten für YouTube-Videos)

Sie können eine maximale Breite mit einem Shortcode festlegen. Diese Methode ist einfach, insbesondere wenn Sie die maximale Breite nur für eine kleine Anzahl von Beiträgen festlegen möchten. Wir haben auch festgestellt, dass diese Methode gut für das Einbetten von Videos in WordPress-Blogposts funktioniert.

Allerdings funktionieren der Embed-Shortcode und seine Breiten- und Höhenparameter nicht für alle oEmbed-Anbieter. Sie können ihn zum Beispiel nicht verwenden, um die Höhe und Breite einer Giphy-Einbettung in WordPress festzulegen. In diesem Fall können Sie eine der anderen unten genannten Methoden ausprobieren.

Anstatt die URL in den Beitragseditor einzufügen, müssen Sie einen Shortcode-Block erstellen. Sie können dann dem Einbettungscode Parameter für Breite und Höhe hinzufügen.

Zum Beispiel müssen Sie einfach die folgenden Zeilen in Embed-Tags ein betten:

width="900" height="600"]https://www.youtube.com/watch?v=6LwWumPeues

Ändern Sie einfach die Werte für Breite und Höhe entsprechend Ihren Bedürfnissen und ersetzen Sie die URL durch den Inhalt, den Sie einbetten möchten.

Wenn Sie mit der Seite zufrieden sind, klicken Sie entweder auf „Aktualisieren“ oder „Veröffentlichen“.

Der eingebettete Inhalt sollte nun genau in den verfügbaren Platz passen.

Methode 2: Verwendung der integrierten WordPress-Embed-Blöcke (einfach)

Der WordPress-Block-Editor verfügt über mehrere Einbettungsblöcke für verschiedene oEmbed-Dienste.

Bei einigen dieser Blöcke können Sie die Ausrichtung der Einbettung ändern und den Inhalt auf „Breite“ oder „Volle Breite“ einstellen.

Wenn Sie volle Breite wählen, nehmen der eingebettete Block und der eingebettete Inhalt die volle Breite des Bildschirms ein. Wenn Sie „Breite“ wählen, nimmt der eingebettete Block die gesamte Breite ein, aber der Inhalt bleibt in der gleichen Größe.

Das Endergebnis kann je nach WordPress-Theme variieren. Es handelt sich jedoch um eine schnelle und einfache Methode, so dass es sich lohnt, zu sehen, ob sie für Ihre WordPress-Website funktioniert.

Klicken Sie einfach auf die Schaltfläche „Ausrichten“ in der kleinen Symbolleiste oberhalb des Blocks. Wählen Sie dann entweder „Breite Breite“ oder „Volle Breite“.

Wenn dadurch das Problem der maximalen Breite für die Einbettung behoben ist, können Sie die Seite veröffentlichen. Wenn Sie mit dem Aussehen nicht zufrieden sind, müssen Sie eine andere Methode ausprobieren.

Methode 3: Verwendung von benutzerdefiniertem PHP (Festlegen einer maximalen Breite für alle Einbettungen)

Manchmal möchten Sie vielleicht eine maximale Breite für alle eingebetteten Inhalte festlegen. Am einfachsten geht das, indem Sie Ihrer WordPress-Website einen eigenen Code hinzufügen.

Das Problem bei dieser Methode ist, dass das Attribut „maximale Breite“ nur dann funktioniert, wenn für den eingebetteten Inhalt nicht bereits eine „Breite“ definiert ist. Wenn der eingebettete Code bereits sein eigenes Attribut „width“ enthält, funktioniert diese Methode möglicherweise nicht.

Wenn Sie den Code Ihrer Website noch nicht bearbeitet haben, werfen Sie einen Blick auf unsere Anleitung zum einfachen Hinzufügen benutzerdefinierter Code-Snippets in WordPress.

In einigen Anleitungen werden Sie aufgefordert, die Themadateien manuell zu bearbeiten, was jedoch zu häufigen WordPress-Fehlern führen und Ihre Website sogar komplett zerstören kann.

Aus diesem Grund empfehlen wir die Verwendung von WPCode. Es erleichtert das Hinzufügen von Code-Snippets in WordPress, ohne dass Sie Ihre Theme-Dateien bearbeiten müssen. So können Sie Ihr Theme aktualisieren oder ändern, ohne dass alle benutzerdefinierten Codefunktionen verloren gehen.

Zunächst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung zu Code Snippets “ Snippet hinzufügen.

Bewegen Sie auf dem nächsten Bildschirm den Mauszeiger über die Option „Benutzerdefinierten Code hinzufügen (neues Snippet)“ und klicken Sie auf die Schaltfläche „Snippet verwenden“, wenn diese erscheint.

Geben Sie auf dem nächsten Bildschirm einen Titel für das Code-Snippet ein. Dieser dient nur als Referenz, Sie können also alles verwenden, was Sie wollen.

Öffnen Sie dann das Dropdown-Menü „Codetyp“ und wählen Sie „PHP Snippet“.

Fügen Sie dann einfach den folgenden Text in den Code-Editor ein:

add_filter( 'embed_defaults', 'wpbeginner_embed_defaults' );

function wpbeginner_embed_defaults() {
    return array(
        'width'  => 400,
        'height' => 280
    );
}

Vergessen Sie nicht, die Attribute Höhe und Breite an Ihre Bedürfnisse anzupassen.

Klicken Sie schließlich auf den Schieberegler „Inaktiv“, damit er „Aktiv“ anzeigt. Klicken Sie dann einfach auf die Schaltfläche „Snippet speichern“ oder „Aktualisieren“, um das Code-Snippet zu aktivieren.

Methode 4: CSS verwenden (maximale Breite für bestimmte Einbettungstypen festlegen)

Standardmäßig fügt WordPress automatisch CSS-Klassen zu verschiedenen Bereichen Ihrer Website hinzu.

Es fügt auch mehrere CSS-Klassen zu Einbettungsblöcken hinzu. Sie können diese CSS-Klassen verwenden, um eine maximale Breite für Einbettungen in Ihrem WordPress-Blog festzulegen.

Dies ist eine gute Wahl, wenn Sie eine maximale Größe für eine bestimmte Art von Einbettung festlegen möchten, z. B. für eingebettete Tweets. Sie können auch eine maximale Größe für alle eingebetteten Inhalte festlegen, unabhängig vom Typ.

Um herauszufinden, auf welche CSS-Klassen Sie abzielen müssen, betten Sie den Inhalt einfach in einen Beitrag oder eine Seite ein und zeigen ihn dann in einer Vorschau in Ihrem Browser an.

Fahren Sie dann mit der Maus über den eingebetteten Inhalt und klicken Sie mit der rechten Maustaste. Wählen Sie in dem daraufhin angezeigten Menü das Werkzeug „Untersuchen“.

Es wird ein neues Fenster geöffnet, in dem alle CSS-Klassen angezeigt werden, die WordPress dem eingebetteten Inhalt hinzugefügt hat. Sie können diese Klassen verwenden, um eine maximale Breite für diese Art der Einbettung festzulegen.

Um einen bestimmten oEmbed-Anbieter zu bestimmen, verwenden Sie in der Regel .wp-block-embed-providername, suchen Sie also nach dieser Klasse im Panel.

In der folgenden Abbildung ist zum Beispiel die Klasse .wp-block-embed-providername unterstrichen. In dieser Zeile ist auch die Klasse .wp-block-embed-pinterest zu sehen.

Mit der Klasse .wp-block-embed-pinterest können Sie eine maximale Breite nur für Pinterest-Einbettungen festlegen.

Zum Beispiel:

.wp-block-embed-pinterest {
    max-width: 900px!important;
}

Beachten Sie jedoch, dass Sie .wp-block-embed-pinterest je nach dem Inhalt, auf den Sie abzielen möchten, möglicherweise durch eine andere CSS-Klasse ersetzen müssen.

Wenn Sie eine maximale Breite für alle Einbettungen festlegen möchten, können Sie das folgende Snippet verwenden:

.wp-block-embed {
    max-width: 900px!important;
}

Der einfachste Weg, Ihrer Website benutzerdefinierte CSS hinzuzufügen, ist die Verwendung von WPCode. Erstellen Sie einfach ein neues benutzerdefiniertes Snippet nach demselben Verfahren wie oben beschrieben.

Öffnen Sie dieses Mal jedoch das Dropdown-Menü „Code-Typ“ und wählen Sie „CSS Snippet“.

Sie können dieses Snippet nun genauso speichern und veröffentlichen, wie Sie ein beliebiges WPCode-Snippet live stellen.

Wenn Sie das getan haben, wird WordPress diesen Wert als maximale Größe für Ihre Einbettungen verwenden.

Bonus-Tipp: So fügen Sie Ihre Social Media Feeds ganz einfach zu WordPress hinzu

Wenn Sie regelmäßig Inhalte von sozialen Medienplattformen einbetten, dann können Sie mit Smash Balloon viel Zeit und Mühe sparen.

Smash Balloon ist das beste Social-Media-Plugin für WordPress und ermöglicht es Ihnen, Ihre Social-Media-Feeds ganz einfach zu einer WordPress-Website hinzuzufügen.

Sie unterstützt alle gängigen Einbettungen für soziale Medien wie YouTube, Twitter und Instagram.

Noch wichtiger ist, dass Smash Balloon auf mobile Endgeräte reagiert und mit jedem WordPress-Theme funktioniert, so dass Ihre eingebetteten Inhalte immer gut aussehen werden.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu erfahren, wie Sie die maximale Breite von oEmbed in WordPress festlegen. Vielleicht interessiert Sie auch unser kompletter Social-Media-Spickzettel oder unser Expertenvergleich der besten Live-Chat-Software für kleine Unternehmen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.