Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Cup
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

So legen Sie die maximale oEmbed-Breite in WordPress fest (4 einfache Methoden)

WordPress macht es einfach, ansprechende Multimedia-Seiten zu erstellen, indem Inhalte von Drittanbietern wie YouTube-Videos und Tweets automatisch eingebettet werden.

Wir haben jedoch in den letzten 15 Jahren durch die enge Zusammenarbeit mit WordPress-Benutzern gelernt, dass oEmbeds auch Probleme verursachen können. Stellen Sie sich vor, ein YouTube-Video sprengt seinen Container und schiebt Ihren gesamten Text zur Seite oder zwingt Ihren Call-to-Action-Button weiter nach unten auf dem Bildschirm.

Hier kommt die Festlegung einer maximalen Breite für oEmbeds ins Spiel. Sie ermöglicht es Ihnen, die Kontrolle zu übernehmen und sicherzustellen, dass Ihre eingebetteten Inhalte nahtlos in das Design Ihrer Website passen.

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

Maximale Breite für oEmbeds in WordPress festlegen

Warum die maximale Breite für OEmbed in WordPress beheben?

WordPress unterstützt oEmbed, was es Ihnen ermöglicht, Inhalte von Drittanbieter-Websites automatisch einzubetten. Sie können zum Beispiel ganz einfach YouTube-Videos, SlideShare-Präsentationen, Tweets und viele andere Arten von Inhalten einbetten.

Diese Inhalte werden nicht auf Ihrem Server gehostet, daher verlangsamen sie Ihre Website nicht. Insbesondere sollten Sie immer Technologien wie oEmbed verwenden und niemals ein Video auf WordPress hochladen.

Hinweis: Obwohl Facebook und Instagram in der Vergangenheit oEmbed unterstützt haben, hat Meta die Unterstützung für oEmbed inzwischen eingestellt. Schritt-für-Schritt-Anleitungen zur Behebung dieses Problems finden Sie in unserem Leitfaden unter So beheben Sie das Facebook- und Instagram-oEmbed-Problem in WordPress.

WordPress versucht immer, die Breite von eingebetteten Inhalten anzupassen, damit sie perfekt in den verfügbaren Platz passen. Manchmal können die eingebetteten Inhalte jedoch zu breit sein und mit anderen Inhaltsbereichen Ihrer Website überlappen.

Ein WordPress-Embed, das die Inhaltsbreite überschreitet

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

Nichtsdestotrotz sehen wir uns an, wie Sie diese fehlende Funktion hinzufügen und eine maximale oEmbed-Breite in WordPress festlegen können. Verwenden Sie einfach die Schnelllinks unten, um direkt zu der Methode zu springen, 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, besonders 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-Blogbeiträge funktioniert.

Der Embed-Shortcode und seine Parameter für Breite und Höhe funktionieren jedoch nicht für alle oEmbed-Anbieter. Sie können ihn beispielsweise nicht verwenden, um die Höhe und Breite eines Giphy-Embeds 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 Breiten- und Höhenparameter zum Einbettungscode hinzufügen.

Zum Beispiel müssen Sie nur das Folgende in embed-Tags einschließen:

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

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

Breite des Embed-Shortcodes

Wenn Sie mit der Seite zufrieden sind, klicken Sie einfach auf 'Aktualisieren' oder 'Veröffentlichen'.

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

oEmbed-Breite angepasst

Methode 2: Verwendung der integrierten WordPress-Einbettungsblöcke (Einfach)

Der WordPress-Blockeditor enthält mehrere Einbettungsblöcke für verschiedene oEmbed-Dienste, wie z. B. Blöcke für Twitter, YouTube-Livestreams und Videos sowie SoundCloud-Einbettungen.

Embed-Blöcke in WordPress

Einige dieser Blöcke ermöglichen es Ihnen, die Ausrichtung des Einbettungsfeldes zu ändern und den Inhalt auf „Breite Breite“ oder „Volle Breite“ einzustellen.

Wenn Sie „volle Breite“ wählen, nehmen der Einbettungsblock und der eingebettete Inhalt die volle Bildschirmbreite ein. Wenn Sie „breite Breite“ wählen, nimmt der Einbettungsblock die gesamte Breite ein, aber der Inhalt behält seine Größe bei.

Das Endergebnis kann je nach Ihrem WordPress-Theme variieren. Dies ist jedoch eine schnelle und einfache Methode, daher lohnt es sich zu sehen, ob sie für Ihre WordPress-Website funktioniert.

Klicken Sie einfach auf die Schaltfläche „Ausrichtung“ in der kleinen Symbolleiste über dem Block. Wählen Sie dann entweder „Breite“ oder „Volle Breite“ aus.

Ausrichtung zu einem Einbettungsblock in WordPress hinzufügen

Wenn dies das Problem mit der maximalen Breite für die Einbettung behebt, 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 (maximale Breite für alle Einbettungen festlegen)

Manchmal möchten Sie vielleicht eine maximale Breite für alle eingebetteten Inhalte festlegen. Der einfachste Weg, dies zu tun, ist das Hinzufügen von benutzerdefiniertem Code zu Ihrer WordPress-Website.

Das Problem bei dieser Methode ist, dass das Attribut für die maximale Breite nur funktioniert, wenn der eingebettete Inhalt nicht bereits eine definierte „Breite“ hat. Wenn der Einbettungscode bereits sein eigenes „Breite“-Attribut enthält, funktioniert diese Methode möglicherweise nicht.

Wenn Sie noch nie den Code Ihrer Website bearbeitet haben, dann werfen Sie einen Blick auf unsere Anleitung zum Thema wie Sie ganz einfach benutzerdefinierte Code-Snippets in WordPress hinzufügen.

Manche Anleitungen bitten Sie, die Theme-Dateien manuell zu bearbeiten, aber das kann zu allen möglichen Fehlern führen und Ihre Website sogar komplett zerstören.

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

WPCode enthält auch eine Bibliothek mit vorkonfigurierten Code-Snippets, darunter ein Snippet zum Festlegen der maximalen Breite für oEmbeds. Dies ermöglicht es Ihnen, eine maximale Breite und Höhe für Ihre oEmbeds festzulegen.

Zuerst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Navigieren Sie nach der Aktivierung zu Code-Snippets » Bibliothek in Ihrem WordPress-Adminbereich.

Die Bibliothek mit fertigen Code-Snippets von WPCode

Hier können Sie nach „Set oEmbed Max Width“ suchen und mit der Maus über das gleichnamige Ergebnis fahren.

Sie können dann auf „Snippet verwenden“ klicken.

Der fertige oEmbed-Code, der vom WPCode-Plugin für Code-Snippets bereitgestellt wird

WPCode führt Sie dann zur Seite „Snippet bearbeiten“, wo das Plugin bereits alles für Sie konfiguriert hat.

Hier sehen Sie den folgenden fertigen Code-Snippet:

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

add_filter( 'embed_defaults', 'wpcode_snippet_oembed_defaults' );

Standardmäßig wird die maximale Breite auf '400' und die maximale Höhe auf '280' gesetzt. Vergessen Sie nicht, die Attribute für Höhe und Breite an Ihre Bedürfnisse anzupassen.

Klicken Sie schließlich auf den Schieberegler 'Inaktiv', sodass er 'Aktiv' anzeigt. Klicken Sie dann einfach auf die Schaltfläche 'Snippet speichern' oder 'Aktualisieren', um das Code-Snippet live zu schalten.

Aktivieren eines benutzerdefinierten PHP-Snippets

Methode 4: Verwendung von CSS (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 den Einbettungsblöcken hinzu. Sie können diese CSS-Klassen verwenden, um eine maximale Breite für Einbettungen auf Ihrem WordPress-Blog festzulegen.

Dies ist eine gute Wahl, wenn Sie eine maximale Größe für einen bestimmten Einbettungstyp festlegen möchten, z. B. für eingebettete Tweets. Es ermöglicht Ihnen auch, eine maximale Größe für alle eingebetteten Inhalte zu erstellen, unabhängig vom Typ.

Um herauszufinden, welche CSS-Klassen Sie ansprechen müssen, betten Sie einfach Inhalte in einen Beitrag oder eine Seite ein und zeigen Sie diese dann in Ihrem Browser in der Vorschau an.

Bewegen Sie dann die Maus über den eingebetteten Inhalt und klicken Sie mit der rechten Maustaste. Wählen Sie im erscheinenden Menü das Tool „Inspizieren“ aus.

Chromes Inspektionswerkzeug

Dies öffnet ein neues Panel, das alle CSS-Klassen anzeigt, die WordPress dem eingebetteten Inhalt hinzugefügt hat. Sie können diese Klassen verwenden, um eine maximale Breite für diese Art von Einbettung festzulegen.

Um einen bestimmten oEmbed-Anbieter anzusprechen, verwenden Sie normalerweise .wp-block-providername. Suchen Sie also nach dieser Klasse im Panel.

Zum Beispiel haben wir im folgenden Bild die Klasse .wp-block-embed-providername unterstrichen. Auf dieser Zeile sehen wir auch die Klasse .wp-block-embed-pinterest.

CSS-Klassen für Einbettungsblöcke finden

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

Zum Beispiel:

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

Seien Sie sich bewusst, dass Sie möglicherweise .wp-block-embed-pinterest durch eine andere CSS-Klasse ersetzen müssen, je nach dem Inhalt, den Sie ansprechen möchten.

Wenn Sie eine maximale Breite für alle Einbettungen festlegen möchten, können Sie den folgenden Ausschnitt verwenden:

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

Der einfachste Weg, benutzerdefiniertes CSS zu Ihrer Website hinzuzufügen, ist die Verwendung von WPCode. Erstellen Sie einfach einen neuen benutzerdefinierten Snippet, indem Sie den gleichen Prozess wie oben beschrieben befolgen.

Öffnen Sie diesmal das Dropdown-Menü „Code-Typ“ und wählen Sie „CSS-Snippet“ aus.

Hinzufügen eines CSS-Snippets zu WordPress

Sie können dieses Snippet jetzt genauso speichern und veröffentlichen, wie Sie jedes WPCode-Snippet live schalten.

Wenn dies erledigt ist, verwendet WordPress diesen Wert als maximale Größe für Ihre Einbettungen.

Bonustipp: Fügen Sie Ihre Social-Media-Feeds ganz einfach zu WordPress hinzu

Wenn Sie regelmäßig Inhalte von Social-Media-Plattformen einbetten, 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 einfach zu einer WordPress-Website hinzuzufügen.

Ein Beispiel für einen eingebetteten Social-Media-Beitrag, erstellt mit Smash Balloon

Es unterstützt alle gängigen Social-Media-Einbettungen, einschließlich YouTube, Twitter, Instagram und TikTok-Videos.

Wichtiger ist, dass Smash Balloon mobilfreundlich ist und mit jedem WordPress-Theme funktioniert, sodass Ihre eingebetteten Inhalte immer gut aussehen.

Ein Beispiel für eine eingebettete Facebook-Timeline, erstellt mit Smash Balloon

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie eine maximale Breite für oEmbeds in WordPress festlegen. Möglicherweise möchten Sie auch unseren Leitfaden zum Einbetten von iFrame-Code in WordPress oder unseren Expertenvergleich der besten Live-Chat-Software für kleine Unternehmen lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Leserinteraktionen

43 CommentsLeave a Reply

  1. Das Problem dabei ist, dass dies auch die maximale Breite der Bilder auf die definierte Größe setzt. Was kann ich tun, wenn ich die Einbettungsbreite im Editor begrenzen möchte, aber nicht die der Bilder? Danke

  2. Hallo, es funktioniert perfekt für mich.
    Aber das wirkt sich auf die gesamte Website aus, die unterschiedliche Breiten hat, da es Vollbildseiten, Seiten mit Seitenleisten oder Foren usw. gibt.
    Ist es möglich, dies so zu diskriminieren, dass es nur die Seiten des bbpress-Forums betrifft?

    Das wird sehr nützlich sein, danke!

  3. Für alle, die dies nicht zum Laufen bringen oder wenn YouTube-Videos und andere iFrame-Inhalte nicht in der Größe geändert werden, müssen Sie den folgenden Code zu Ihrer style.css hinzufügen

    /* Sicherstellen, dass Einbettungen und iframes in ihre Container passen */
    embed,
    iframe,
    object {
    max-width: 100%;
    }

    Ich hoffe, das hilft. Und Syed, danke für den tollen Beitrag!

  4. Sie können iframe, object, embed { max-width: 100%; height:auto;} nicht verwenden, ja, es korrigiert die Breite und macht das Video responsiv, aber es behebt nicht die Höhe beim Betrachten im Browser.

    Gibt es tatsächlich eine Möglichkeit, dies zu tun? Ich habe so ziemlich alles versucht, selbst FitVids funktionieren nicht, weil Sie eine px-Basisbreite in den Funktionen festlegen, aber diese Breite wird auf Mobilgeräten angezeigt. Wenn Sie dann versuchen, dies mit max-width zu korrigieren, gerät die Höhe selbst im Browser durcheinander.

    Ich denke an Media Queries oder so? Ugh, ich bin erledigt.

  5. Hallo, danke für den Tipp, aber er funktioniert nicht. Hier ist, was Sie in Ihrer function.php-Datei benötigen:

    add_filter(’embed_defaults’,’yourthemename_embed_defaults’);
    function yourthemename_embed_defaults($defaults) {
    $defaults[‘width’]=600; // oder was auch immer Sie wollen
    $defaults[‘height’]=360; // oder was auch immer Sie wollen
    return $defaults;
    }

    es funktioniert super!
    Viele Grüße,

    • Ich bin mir nicht sicher, ob der andere Kommentator das bemerkt hat, aber der Code hat geschweifte Anführungszeichen und würde eine Website beschädigen. Ich werde hier testen, ob Shortcode-Wrapper die Änderung verhindern, die den Code beschädigt hat...

      add_filter('embed_defaults','yourthemename_embed_defaults');
  6. Ich versuche, einen hochwertigen Animationsfilm von YouTube in meinem WordPress-Blog zu posten. Der untere Teil des Rahmens wird in der Vorschau abgeschnitten. Sobald auf den Wied pfeil geklickt wird, verschwindet dieses Problem. Aber der Filmemacher ist zu Recht unglücklich, dass die Vorschau in dem Beitrag den Anschein eines Fehlers erweckt. Das Anpassen von Höhe und Breite im Beitragscode funktioniert, löst das Problem aber nicht. Ideen?

  7. Hallo,

    Ich habe Ihre Lösung für die Breite verwendet und sie hat großartig funktioniert. Aber wie stelle ich jetzt die Höhe ein? Ist es einfach dasselbe if ( ! isset( $content_width ) ) $content_width = 560; nur mit dem Wort „Breite“ durch das Wort „Höhe“ ersetzt? Ich habe es versucht und es hat nicht funktioniert…

  8. Hallo,
    gibt es eine Möglichkeit, alle iframes auf der Website auf 100% Breite zu erzwingen. Nicht nur YouTube.
    Ich habe ungefähr 300 iframes und alle haben eine feste Größe, also... vielen Dank im Voraus.
    Josef

  9. Hallo,
    gibt es eine Möglichkeit, alle iframes auf der Website auf 100% Breite zu erzwingen. Nicht nur YouTube
    Ich habe ungefähr 300 iframes und alle haben eine feste Größe, also...

  10. Ich habe diesen Code zu meiner functions.php hinzugefügt, aber es hat keinen Unterschied gemacht, und ich gehe davon aus, dass dies daran liegt, dass mein Theme $content_width nicht definiert.

    Ich sehe den Link zum Codex, der die Definition erklärt, aber ich bin kein Entwickler und habe keinen zur Hand; wie fügt man eine $content_width-Definition zu einem Theme hinzu? Wo gehört sie hin? Danke!

  11. Das hat perfekt funktioniert. Gibt es eine Möglichkeit, das Video zu erzwingen und standardmäßig auf HD-Qualität anstatt auf SD-Qualität einzustellen, was anscheinend der Standard ist, obwohl ich in meinen YouTube-Einstellungen standardmäßig auf HD eingestellt habe?

  12. Bitte beachten Sie, dass die Variable $content_width als global deklariert werden muss, bevor dieser Fix funktioniert.

  13. WP scheint von Leuten aktualisiert zu werden, die sich über die Zentralität von Multimedia im Internet nicht im Klaren sind. Warum diese grundlegende Präferenz Code-Eingriffe erfordern sollte, weiß ich nicht. WP konnte eindeutig nicht erkennen, wie breit meine Spalten waren. Jedenfalls ist jetzt alles behoben. Ihr Leute seid spitze.

    • Nun Nigel, da steckt mehr dahinter. Sie versuchen, WordPress für „Benutzer“ einfacher zu machen. Im Laufe der Zeit hat WordPress eine Option nach der anderen hinzugefügt. Das wird für neue Benutzer wirklich beängstigend. Deshalb gehen sie den Weg der Entscheidungen statt der Optionen. Die Hoffnung bei dieser oEmbed-Maximalbreite ist, dass jeder Theme-Designer sie in seinen Themes definieren sollte/wird, damit der Endbenutzer sich nicht darum kümmern muss.

      Admin

  14. Hallo
    Danke für deinen Beitrag.

    Aber ich bekomme das nicht richtig hin, ich habe den anderen Beitrag, den Sie erwähnt haben, in den Kommentaren geschrieben. Aber ich bekomme es immer noch nicht zum Laufen, ich habe das hier eingefügt:

    Am Anfang meiner functions.php, aber dann funktionierte meine gesamte Website nicht mehr. Alles wurde weiß, ich musste die Datei über FTP bearbeiten, um sie wieder zum Laufen zu bringen.

    Was mache ich falsch?

    Danke!

    • Ich konnte die Responsivität irgendwie zum Laufen bringen, indem ich in CSS eine max-width: 100% für meine iFrames gesetzt habe. Natürlich wird die Höhe automatisch je nach Ihrer Inhaltsbreite eingestellt, aber das sollte zumindest dazu führen, dass es ohne zusätzliches JS korrekt funktioniert. Fitvid ist der richtige Weg, aber das hat für mich funktioniert.

      • Paul,

        Können Sie das CSS einfügen, das Sie verwendet haben, um die Breite Ihres iframes auf 100 % einzustellen?

        • Ich verwende diesen CSS-Code für responsives Design:

          iframe, object, embed { max-width: 100%; } (wenn Sie möchten, können Sie -> height: auto hinzufügen)

        • Leider funktioniert Romans CSS entweder bei einigen Themes nicht oder es funktioniert nicht mit dem neuen WP 3.6 Mediaplayer, der in den Core integriert ist. Ich habe es gerade ausprobiert und nichts. Ich versuche, ein Theme zu bekommen, das responsiv ist, damit der neue WP 3.6 Player ebenfalls responsiv bleibt, aber bisher ohne Erfolg. Das 2012er Theme scheint es sehr gut zu handhaben, aber ich kann nicht herausfinden, was sie anders machen als bei diesem Theme, mit dem ich arbeite.

  15. Ich bin ein Neuling in WP & Coding, daher bin ich mir nicht sicher, wo ich den Code „if ( ! isset( $content_width ) ) $content_width = 600;“ einfügen soll. Ich habe die Datei function.php in meinem Suffusion-Theme geöffnet und bin mir nicht sicher, wo genau ich diesen Code einfügen soll. Ich habe es an mehreren Stellen versucht, wo von Video-Anhängen die Rede war, und es funktioniert nicht. In meinem Fall sind die eingebetteten Videos nach dem Upgrade auf WP 3.5 zu groß für mein Theme.

  16. Es wurde zur richtigen Zeit veröffentlicht!!! Der Name „Elvin“ ist auch etwas Besonderes.
    Danke für deinen Post.

    • Ja, da stimme ich Ihnen vollkommen zu. Nur schlecht codierte Themes haben das nicht. Aber es gibt viele davon da draußen. Ein Theme, das einer unserer Kunden verwendete, hatte dieses Stück fehlte. Insgesamt ist es ein gutes Theme.

      Admin

Hinterlasse eine Antwort

Vielen Dank, dass Sie einen Kommentar hinterlassen. Bitte beachten Sie, dass alle Kommentare gemäß unserer Kommentarrichtlinie moderiert werden und Ihre E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Führen wir ein persönliches und bedeutungsvolles Gespräch.