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

Anleitung für Anfänger: Wie man ein Video in WordPress mittig ausrichtet

Im Laufe der Jahre haben wir bei WPBeginner viele Videos erstellt und sie zu unseren WordPress-Blogbeiträgen hinzugefügt. Gelegentlich hatten wir jedoch Probleme mit der mittigen Ausrichtung der Videos, wenn sie dem Artikel hinzugefügt wurden.

Wir haben festgestellt, dass WordPress das Video automatisch nach links ausrichtet, wenn die Breite des Videos geringer ist als der Artikelbereich, so dass auf der rechten Seite zusätzlicher Leerzeichen bleibt. Wenn Sie mit dem gleichen Problem konfrontiert sind, dann ist diese Anleitung für Sie.

In diesem Artikel zeigen wir Ihnen, wie Sie ein Video in WordPress ganz einfach mittig ausrichten können.

How to center align a video in WordPress

Warum Videos in WordPress mittig ausrichten?

Wenn Sie ein Video in WordPress einbetten, wird es standardmäßig automatisch linksbündig ausgerichtet. Das liegt daran, dass Videos externe Inhalte sind, die in den Inhalt eingebettet sind, so dass WordPress nicht erraten kann, wie Sie sie anzeigen möchten.

In der Regel wird sie automatisch links ausgerichtet, so dass Sie die Ausrichtung bei Bedarf anpassen können.

Wenn Sie das Video in der Mitte ausrichten, können die Nutzer Ihre Inhalte besser sehen. Auf diese Weise haben Sie keinen auffälligen Leerraum auf der einen Seite der Seite, was unprofessionell wirken könnte.

Wenn Sie Videos direkt in WordPress hochladen, passiert dasselbe, wenn ihre Breite geringer ist als Ihr Inhaltsbereich. WordPress wird sie standardmäßig links ausrichten.

Sehen wir uns also an, wie Sie ein Video in einer WordPress-Website ganz einfach mittig ausrichten können. Wir werden sowohl den Block-Editor als auch den klassischen Editor behandeln. Sie können also auf die Links unten klicken, um zu einem beliebigen Abschnitt zu springen.

Wie man ein Video im WordPress Content Editor zentriert

Wenn Sie möchten, dass Ihr Video die Breite Ihres Inhaltsbereichs ausfüllt, fügen Sie am besten eine YouTube- oder Vimeo-Video-URL direkt in den WordPress-Inhaltseditor ein.

Zunächst müssen Sie einen Beitrag oder eine Seite bearbeiten oder einen neuen Beitrag hinzufügen. Sobald Sie sich im Inhaltseditor befinden, fügen Sie einfach den Link zum Video ein. WordPress wird das Video automatisch einbetten.

Paste video embed code in block editor

Wählen Sie als Nächstes den Videoblock aus und klicken Sie dann auf die Option „Ausrichtung ändern“. Im Dropdown-Menü können Sie die Position des Videos auswählen.

In WordPress können Sie zwischen den folgenden Ausrichtungen wählen:

  • große Breite
  • volle Breite
  • links ausrichten
  • Zentrum ausrichten
  • rechts ausrichten.

Wählen Sie nun die Option „Zentriert ausrichten“.

Align the video to the center

Danach können Sie Ihre Seite oder Ihren Beitrag in der Vorschau anzeigen und veröffentlichen.

Das Video wird nun mittig ausgerichtet.

Center aligned video preview

Aus dem einen oder anderen Grund kann es jedoch sein, dass Sie den Einbettungscode verwenden müssen. In diesem Fall müssen Sie etwas einfaches HTML um den Einbettungscode Ihres Videos hinzufügen.

Zunächst müssen Sie auf die 3 gepunkteten Symbole im Videoblock klicken. Danach können Sie die Option „Als HTML bearbeiten“ aus dem Dropdown-Menü auswählen.

Edit as HTML

Anschließend können Sie den folgenden HTML-Code um den Einbettungscode des Videos herum eingeben:

<div style="text-align:center;">

/// your video embed code goes here

</div>

So würde Ihr Einbettungscode mit dem benutzerdefinierten HTML aussehen.

Preview of custom HTML code

Sie können nun Ihre Änderungen speichern und eine Vorschau des Beitrags oder der Seite anzeigen. Jetzt wissen Sie, wie Sie ein Video in HTML zentrieren können.

Eine andere Möglichkeit besteht darin, die Breite Ihres Videos manuell zu vergrößern, damit es in den Inhaltsbereich passt. Dazu müssen Sie den Parameter „width“ in Ihrem Einbettungscode hinzufügen oder ändern.

<iframe width="760" height="315" src="https://www.youtube.com/embed/4YpyiJ05YOg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Ausrichten von Videos im klassischen Editor

Wenn Sie den klassischen Editor verwenden, können Sie Videos zentriert ausrichten, indem Sie einen Beitrag bearbeiten oder einen neuen Beitrag erstellen.

Sobald Sie sich im Editor befinden, wechseln Sie zur Textansicht. Geben Sie nun den folgenden HTML-Code ein:

<div style="text-align:center;">

/// your video embed code goes here

</div>

Ersetzen Sie einfach „Ihr Videoeinbettungscode geht hier hin“ durch den Einbettungscode Ihres Videos.

Wenn das erledigt ist, sieht es ungefähr so aus:

Center align videos in classic editor

Sie können nun eine Vorschau anzeigen und Ihre Seite veröffentlichen.

Besuchen Sie einfach Ihre Website, um das mittig ausgerichtete Video zu sehen.

Center aligned video classic editor preview

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man ein Video in WordPress mittig ausrichtet. Vielleicht interessieren Sie sich auch für unsere Anleitung zum Hinzufügen von Sonderzeichen in WordPress-Beiträgen und die wichtigsten Tipps zur Verwendung von Shortcodes in WordPress.

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

18 KommentareEine Antwort hinterlassen

  1. A Owadud Bhuiyan

    if I have three YouTube videos, can I show them in the same row by adjusting the width?

    Thanks for the tips.

  2. Tom Z

    Thanks for posting this, it worked and was very helpful!

    • WPBeginner Support

      Glad to hear our guide was helpful!

      Admin

    • WPBeginner Support

      You’re welcome!

      Admin

  3. S

    I’m trying to center a gif that I’ve embedded and the new editor doesn’t let me edit the HTML of this type of content. How can I center this?

  4. Diane

    How does this work when using the Gutenberg Editor’s You Tube embed block? I tried both ways you described, but either are working.

    • WPBeginner Support

      With the YouTube embed block there should be a section when you select the block to set a specific alignment that you can use.

      Admin

  5. Marshall

    The tip sounds great, but every time I „save“ and come back, it’s gone.

    • WPBeginner Support

      You may want to try to clear any caching on your site to ensure you’re not seeing the cached version of the page.

      Admin

  6. Himanshu

    You offer a lot of outstanding tricks and videos to go along. I have subscribed to your email newsletter and have seen many videos for my new website. However, your trick on aligning the video on the center did not work. Here is the issue: I shot a 15-sec video on iPhone converted into mp4 and uploaded on my host server, shows up in my Wordpress galley. Since the video occupies the entire width, I changed the video width and height to a 1/3 each. Then I pasted the align center code you showed on your video at https://www.wpbeginner.com/beginners-guide/beginners-guide-how-to-center-align-a-video-in-wordpress/#respond

    But the video does not align in the center. When I look at the video in the frontend editor, I see a box with a blue line that occupies the entire width even when the video is 1/3 the width. Looks like this blue line box cannot be made smaller with any code. Is that true? Any tricks in your bag of trick that you can share?

    You have been great and thanks for your videos. you made my life so much easier.

    • WPBeginner Support

      Hi Himanshu,

      You can try switching to the HTML editor to add the code. Hopefully it would work then.

      Admin

  7. Young

    thank you for the article! very helpful

  8. Deb

    Thank you, this article was very helpful!

  9. Carole

    Adding the div html around the embed code worked like a charm. Thanks!

  10. bilikid

    Thanks for this. Definitely plan on trying it!!

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.