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

Beginner’s Guide: Så här centrerar du ett videoklipp i WordPress

Under åren på WPBeginner har vi skapat massor av videor och lagt till dem i våra WordPress-blogginlägg. Ibland har vi dock stött på problem med att centrera videorna när de har lagts till i artikeln.

Det vi upptäckte var att om din videos bredd är mindre än din artikelyta, så justerar WordPress den automatiskt till vänster, vilket lämnar extra vitt utrymme på höger sida. Om du står inför samma problem är den här guiden något för dig.

I den här artikeln visar vi dig hur du enkelt centrerar ett videoklipp i WordPress.

How to center align a video in WordPress

Varför centrerat inrikta videoklipp i WordPress?

När du embedar ett videoklipp i WordPress justeras det automatiskt till vänster som standard. Detta beror på att videoklipp är externt innehåll som är embedat i innehållet, så WordPress kan inte gissa hur du gillar att visa det.

Som en bästa praxis justeras den automatiskt till vänster, och det är upp till you att justera justeringen om det behövs.

Genom att rikta in videoklippet till centrerat kommer användarna att få en bättre upplevelse när de viewar your content. På så sätt kommer du inte att ha notice tomt utrymme på ena sidan av page, vilket kan ge ett oprofessionellt utseende.

Dessutom, om du uploadar videoklipp direkt till WordPress, kommer samma sak att hända med dem om deras bredd är mindre än ditt content area. WordPress justerar dem till vänster som standard.

Med detta sagt, låt oss se hur du enkelt kan centrera en video på en WordPress-webbplats. Vi kommer att täcka både blockredigeraren och den klassiska redigeraren, så du kan klicka på länkarna nedan för att hoppa vidare till något avsnitt.

Så här centrerar du videoklipp i WordPress Content Editor

Om du vill att ditt videoklipp ska fylla bredden på ditt innehållsområde är det bästa sättet att göra detta genom att lägga till en YouTube- eller Vimeo video URL direkt i WordPress content editor.

Först måste du edit ett post eller en page eller add new. När du är i content editor klistrar du helt enkelt in länken till videoklippet. WordPress kommer att embedda videoklippet automatiskt.

Paste video embed code in block editor

Välj sedan blocket Video och klicka sedan på alternativet ”Change Alignment”. Från dropdown-menyn kan du välja positionen för videoklippet.

WordPress låter dig välja mellan följande inriktningar:

  • stor bredd
  • full width
  • anpassa vänster
  • justera centrerat
  • justera höger.

Gå vidare och välj alternativet ”Justera centrerat”.

Align the video to the center

Efter det kan du previewa och publicera din page eller post.

Videoklippet kommer nu att vara centrerat.

Center aligned video preview

Av en eller annan anledning kan du dock behöva använda inbäddningskoden. I så fall måste du lägga till lite enkel HTML runt din videos inbäddningskod.

Först måste du klicka på de 3 prickade iconerna i videoklippet block. Efter det kan du välja alternativet ”Edit as HTML” från dropdown-menyn.

Edit as HTML

Följaktligen kan du enter följande HTML-kod runt embed-koden för videoklippet:

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

/// your video embed code goes here

</div>

Så här skulle din embed-kod gilla att se ut med den customze HTML.

Preview of custom HTML code

Du kan nu spara dina ändringar och förhandsgranska inlägget eller sidan. Nu vet du hur du centrerar en video i HTML.

En annan metod är att manuellt öka bredden på ditt videoklipp så att det passar in i content area. För att uppnå detta måste du add to eller ändra parametern ’width’ i din embed-kod.

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

Hur man centrerar och justerar videoklipp i Classic Editor

Om du använder Classic-redigeraren kan du centrera videor genom att redigera ett inlägg eller skapa ett nytt.

När du är i editorn växlar du till vyn Text. Enter nu följande HTML-kod:

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

/// your video embed code goes here

</div>

Se bara till att ersätta ”your video embed code goes here” med koden för ditt videoklipp.

När det är gjort kommer det att se ut ungefär så här:

Center align videos in classic editor

You can now preview and publish your page.

Besök helt enkelt your website för att se det centrerade videoklippet.

Center aligned video classic editor preview

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du centrerar en video i WordPress. Du kanske också vill se vår guide om hur du lägger till specialtecken i WordPress-inlägg och viktiga tips för att använda kortkoder i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

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.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

18 kommentarerLämna ett svar

  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!

      Administratör

  3. Marc

    Thanks for the info!! :)

    • WPBeginner Support

      You’re welcome!

      Administratör

  4. 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?

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

      Administratör

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

      Administratör

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

      Administratör

  8. Young

    thank you for the article! very helpful

  9. Deb

    Thank you, this article was very helpful!

  10. Carole

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

  11. bilikid

    Thanks for this. Definitely plan on trying it!!

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.