Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

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

Nachdem wir jedoch in den letzten mehr als 15 Jahren eng mit WordPress Benutzern zusammengearbeitet haben, haben wir gelernt, dass oEmbeds auch Probleme verursachen können. Stellen Sie sich ein YouTube Video vor, das seinen Container überfüllt und Ihren gesamten Text zur Seite schiebt oder Ihren Call to Action Button weiter unten in der Ansicht erzwingt.

Hier kommt das Festlegen einer maximalen Breite für oEmbeds ins Spiel. Damit können Sie die Kontrolle übernehmen und sicherstellen, dass sich Ihre eingebetteten Inhalte nahtlos in das Design Ihrer Website einfügen.

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

Setting oEmbed maximum width in WordPress

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.

A WordPress embed overflowing the content width

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.

Embed shortcode width

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.

oEmbed width adjusted

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

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

Embed blocks in WordPress

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“.

Adding aligning to an embed block in WordPress

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 Dateien des Themes manuell zu bearbeiten, aber das kann zu allen möglichen Fehlern führen und sogar Ihre Website komplett zerstören.

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.

WPCode enthält auch eine Bibliothek mit vorkonfigurierten Code-Snippets, darunter ein Snippet „Set oEmbed Max Width“. Damit können Sie eine maximale Breite und Höhe für Ihre oEmbeds festlegen.

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.

Navigieren Sie nach der Aktivierung in Ihrem WordPress Adminpanel zu Code Snippets „ Bibliothek.

The WPCode ready-made code snippets library

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

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

The ready-made oEmbed code, provided by the WPCode code snippets plugin

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

Hier finden Sie das folgende vorgefertigte 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 „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.

Activating a custom PHP snippet

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“.

Chrome's inspect tool

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.

Finding CSS classes for embed blocks

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“.

Adding a CSS snippet to WordPress

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.

An example of an embedded social media post, created using Smash Balloon

Es unterstützt alle gängigen Einbettungen für soziale Medien, einschließlich YouTube-, Twitter-, Instagram- und TikTok-Videos.

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.

An example of an embedded Facebook timeline, created using Smash Balloon

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man eine maximale Breite für oEmbed in WordPress festlegt. Vielleicht interessieren Sie sich auch für unsere Anleitung zum einfachen Einbetten von iFrame-Code in WordPress oder unseren 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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

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

Reader Interactions

44 KommentareEine Antwort hinterlassen

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Andreu

    The problem of this is that it makes the max width of the images also to the size defined. What can I do if I want to limit the embed width in the editor but not the image one? Thanks

  3. Joe Daniel

    Thank you. I’ve been struggling with this for weeks… works for WP 4.0 with Genesis theme

  4. digg

    Hi, it works perfectly for me.
    But this affects to the overall site, which have different widths since there are full-width pages, with sidebars, or forums, etc.
    Is it possible to discriminate this to affect only bbpress forum’s pages?

    It will be very useful, thanks!

  5. Ajit Kumar

    For anybody who can’t get this working or if Youtube videos and other iframe content are not getting resized, you will need to add the following code to your style.css

    /* Make sure embeds and iframes fit their containers */
    embed,
    iframe,
    object {
    max-width: 100%;
    }

    Hope this helps. And Syed, thanks for the great post!

    • Waymond

      Thanks for posting the solution!

  6. Dj

    THANKS! This was driving me crazy.

  7. Anto (@imanto)

    You can’t use iframe, object, embed { max-width: 100%; height:auto;} yes it gets the width correct and makes the video responsive, but it doesnt fix the height when viewing in the browser.

    Is there actually a way to do this? Ive tried pretty much everything, even fitvids dont work because you are setting a px base width in the functions, but it shows that width on mobile, then when you try to correct that with max-width, the height messes up even in the browser….

    im thinking media queries or something? ugh im beat.

  8. Amir

    Works perfect, thanks a lot!

  9. Pierre Dickinson

    Hi, thanks for the tip, but it doesn’t work, here’s what you need in your function.php file :

    add_filter(‚embed_defaults‘,’yourthemename_embed_defaults‘);
    function yourthemename_embed_defaults($defaults) {
    $defaults[‚width‘]=600; // or whatever you want
    $defaults[‚height‘]=360; // or whatever you want
    return $defaults;
    }

    it works great!
    Regards,

    • Filip Kojic

      This code doesnt work well. I put my theme name and theme just blocks.

    • Valerie

      Not sure if the other commenter realized it, but the code has curly quotes and would break a site. Gonna test here to see if shortcode wrappers will prevent the change that broke the code…

      add_filter('embed_defaults','yourthemename_embed_defaults');
  10. John Cronin

    I am attempting to post a high-end animation film from YouTube to my WordPress blog. The bottom of the frame is cut off in the preview. Once the play arrow is clicked, this problem goes away. But the filmmaker is rightfully unhappy that the preview in the post will give the appearance of an error. Adjusting height and width in the post code works, but does not solve the problem. Ideas?

  11. Colin

    Worked like a charm – thanks!

  12. Ryan Silver

    Hi there,

    I used your solution for width and it worked great. But how do I set the height now? Is it just the same if ( ! isset( $content_width ) ) $content_width = 560; but with the word ‚width‘ is replaced with the word ‚height‘ ? I tried that and it did not work….

      • FIlip Kojic

        It looks like it is 16:10. Here is example:

        How can I change height. Please someone answer. :)

  13. Jasmine Ham

    greats, it’s working! but what if i need it to be responsive?
    any idea to doing that?

  14. josef

    hi,
    is there a way to force all ifreams in the site to be 100% widht. not omly youtube
    i have about 300 ifreams and all fixed size so… thanks in advance
    Josef

  15. josef

    hi,
    is there a way to force all ifreams in the site to be 100% widht. not omly youtube
    i have about 300 ifreams and all fixed size so…

  16. Ryan

    I added this code to my functions.php but it made no difference, and I assume that’s because my theme doesn’t define $content_width.

    I see the link to the codex about defining it, but I’m not a developer and don’t have one on call; how does one add a $content_width definition to a theme? Where does it go? Thanks!

  17. Justin Germino

    This worked perfectly, is there anyway to force and default the video to HD quality instead of SD quality which seems to be the default even though in my YouTube settings I have it set to default to HD?

    • Editorial Staff

      What is your max width? I have read in the past that Youtube adjusts quality based on the width of the iframe.

      Admin

  18. Grant Norwood

    Please note that the $content_width variable must be declared as global before this fix will work.

  19. Nigel Parry

    WP seems to be updated by people who are unclear about the centrality of multimedia on the Internet. Why this basic preference would have to require code intervention I don’t know. WP clearly could not tell how wide my columns were. Anyway, all fixed now. You folks rock.

    • Editorial Staff

      Well Nigel, there is more to it. They are trying to make WordPress easier to use for „users“. Overtime, WordPress has added one option after another. This gets really terrifying for new users. This is why they are going with decisions over options route. The hope with this oEmbed max width is that each theme designer should/will define it in their themes, so the end-user doesn’t have to worry about it.

      Admin

  20. Alex Leonard

    Thanks! I was a little baffled as to where the media embed setting had gone to!

  21. Azad

    Hello
    Thanks for your post.

    But I can’t get this right, I wrote the other post you mentioned in the comments. But I still can’t get it working, I put this:

    At the begginin of my functions.php, but then my whole site stoped working. everything turned white, I had to edit the file through ftp to get it working again.

    What am I doing wrong?

    Thanks!

    • Azad

      Hey :)
      I got it working, thanks!

  22. Monica

    Hi, where in the functions.php file should this code be placed?

  23. Jesse Garnier

    What value would be appropriate for $content_width for a variable-width or responsive design?

    • Editorial Staff

      For responsive design, you probably want to use fitvid.js or something similar to resize your videos.

      Admin

    • Paul Lumsdaine

      I was able to kind of get the responsiveness to work with setting a max-width: 100% on my iframes in CSS. Of course the height is set automatically depending on your content width but this should at least get it working correctly without using any extra js. Fitvid is the way to go, but this worked for me.

      • Jeremy Myers

        Paul,

        Can you include the css you used to set your iframe width to 100%?

        • Roman

          I use this CSS code for responsive design:

          iframe, object, embed { max-width: 100%; } ( if you want you can add -> height: auto )

        • Tevya

          Unfortunately Roman’s CSS either doesn’t work on some themes or doesn’t work with the new WP 3.6 media player that’s built-in to core. I just tried it and nothing. I’m trying to get a theme that’s responsive to keep the new WP 3.6 player responsive as well, but no luck so far. The 2012 theme seems to handle it very nicely, but I can’t figure out what they’re doing different than this theme I’m working with.

  24. Melanie

    I am a novice to WP & coding, with that said not sure where to put the code „if ( ! isset( $content_width ) ) $content_width = 600;“ I went to the function.php file in my Suffusion theme and not sure where exactly to insert this code. I tried a number of places where it mentioned video attachment and it is not working. In my case, the embedded videos are now too big for my theme since upgrading to WP 3.5.

    • Editorial Staff

      Change the number 600 to match your theme size. If it is too big for your theme, then make it smaller.

      Admin

  25. Jessi Linh

    It’s been released at right time!!! The name „Elvin“ is so special,too.
    Thanks for your post.

    • Editorial Staff

      Yup, totally agreed with you there. Only poorly coded themes will not have that. But there are a lot of those out there. A theme that one of our clients was using had that piece missing. Overall, its a good theme.

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.