Przez lata w WPBeginner stworzyliśmy wiele filmów i dodaliśmy je do naszych wpisów na blogu WordPress. Czasami jednak napotykaliśmy problem z wyśrodkowaniem filmów po dodaniu ich do artykułu.
Odkryliśmy, że jeśli szerokość twojego filmu jest mniejsza niż obszar artykułu, WordPress automatycznie wyrównuje go do lewej strony, pozostawiając dodatkową białą przestrzeń po prawej stronie. Jeśli borykasz się z tym samym problemem, ten przewodnik jest dla Ciebie.
W tym artykule pokażemy, jak łatwo wyśrodkować film w WordPress.
Po co wyśrodkowywać filmy w WordPressie?
Kiedy osadzasz film w WordPressie, jest on domyślnie automatycznie wyrównywany do lewej. Dzieje się tak, ponieważ filmy są zewnętrzną treścią osadzaną w treści, więc WordPress nie jest w stanie odgadnąć, w jaki sposób chcesz ją wyświetlić.
Najlepszą praktyką jest automatyczne wyrównanie go do lewej strony, pozostawiając użytkownikowi możliwość dostosowania wyrównania w razie potrzeby.
Wyrównując film do środka, użytkownicy będą mogli lepiej zobaczyć twoją treść. W ten sposób nie będziesz miał powiadomień o pustej przestrzeni po jednej stronie strony, co mogłoby nadać nieprofesjonalny wygląd.
Poza tym, jeśli przesyłasz filmy bezpośrednio do WordPressa, to samo stanie się z nimi, jeśli ich szerokość jest mniejsza niż twoja treść. WordPress domyślnie wyrówna je do lewej strony.
W związku z tym zobaczmy, jak łatwo wyśrodkować film w witrynie internetowej WordPress. Omówimy zarówno edytor blokowy, jak i klasyczny, więc możesz kliknąć poniższe odnośniki, aby przejść do dowolnej sekcji.
Jak wyśrodkować film w edytorze treści WordPress?
Jeśli chcesz, aby twój film wypełniał szerokość obszaru treści, najlepszym sposobem na to jest dodanie adresu URL filmu z YouTube lub Vimeo bezpośrednio w edytorze treści WordPress.
Najpierw musisz edytować wpis lub stronę albo utworzyć nową. Po przejściu do edytora treści wystarczy wkleić odnośnik do filmu. WordPress automatycznie osadzi film.
Następnie wybierz blok Film, a następnie kliknij opcję „Zmień wyrównanie”. Z rozwijanego menu można wybrać pozycję filmu.
WordPress umożliwia wybór spośród następujących wyrównań:
- duża szerokość
- pełna szerokość
- wyrównaj do lewej
- wyrównaj środek
- Wyrównaj do prawej.
Wybierz opcję „Wyrównaj do środka”.
Następnie możesz wyświetlić podgląd i opublikować twoją stronę lub wpis.
Film zostanie teraz wyśrodkowany.
Jednak z tego czy innego powodu może być konieczne użycie kodu osadzania. W takim przypadku konieczne będzie dodanie prostego kodu HTML wokół kodu osadzania twojego filmu.
Najpierw należy kliknąć 3 kropkowane ikonki w bloku filmu. Następnie możesz wybrać opcję „Edytuj jako HTML” z menu rozwijanego.
Następnie możesz wpisz następujący fragment kodu HTML wokół kodu osadzania filmu:
<div style="text-align:center;">
/// your video embed code goes here
</div>
Oto jak wyglądałby twój kod osadzania z własnym kodem HTML.
Możesz teraz zapisać swoje zmiany i wyświetlić podgląd wpisu lub strony. Teraz już wiesz, jak wyśrodkować film w HTML.
Innym podejściem jest ręczne zwiększenie szerokości twojego filmu, aby pasował do obszaru treści. Aby to osiągnąć, musisz dodać lub zmienić parametr „width” w twoim kodzie osadzania.
<iframe width="760" height="315" src="https://www.youtube.com/embed/4YpyiJ05YOg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Jak wyśrodkować film w edytorze klasycznym
Jeśli korzystasz z klasycznego edytora, możesz wyśrodkować filmy, edytując wpis lub tworząc nowy.
Po przejściu do edytora przełącz się na widok Tekst. Teraz wpisz następujący kod HTML:
<div style="text-align:center;">
/// your video embed code goes here
</div>
Upewnij się tylko, że „kod osadzania twojego filmu znajduje się tutaj” został zastąpiony kodem osadzania twojego filmu.
Gdy to zrobisz, będzie wyglądać mniej więcej tak:
Możesz teraz wyświetlić podgląd i opublikować twoją stronę.
Wystarczy przejść na twoją witrynę internetową, aby zobaczyć wyśrodkowany film.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak wyśrodkować film w WordPress. Warto również zapoznać się z naszym przewodnikiem na temat dodawania znaków specjalnych we wpisach WordPress i podstawowymi wskazówkami dotyczącymi korzystania z krótkich kodów w 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.
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.
WPBeginner Support
For multiple videos, you would want to set up multi-column content following our guide below:
https://www.wpbeginner.com/plugins/how-to-add-multi-column-content-in-wordpress-posts-no-html-required/
Administrator
Tom Z
Thanks for posting this, it worked and was very helpful!
WPBeginner Support
Glad to hear our guide was helpful!
Administrator
Marc
Thanks for the info!!
WPBeginner Support
You’re welcome!
Administrator
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?
WPBeginner Support
You should have the image alignment tools from our article below:
https://www.wpbeginner.com/beginners-guide/how-to-add-and-align-images-in-wordpress-block-editor/
Administrator
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.
Administrator
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.
Administrator
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.
Administrator
Young
thank you for the article! very helpful
Deb
Thank you, this article was very helpful!
Carole
Adding the div html around the embed code worked like a charm. Thanks!
bilikid
Thanks for this. Definitely plan on trying it!!