Deseja centralizar um vídeo no WordPress?
Por padrão, se a largura do seu vídeo for menor do que a área do artigo, o WordPress o alinhará automaticamente à esquerda, deixando um espaço em branco extra no lado direito.
Neste artigo, mostraremos a você como centralizar facilmente um vídeo no WordPress.
Por que alinhar os vídeos ao centro no WordPress?
Quando você incorpora um vídeo no WordPress, ele é alinhado automaticamente à esquerda por padrão. Isso ocorre porque os vídeos são conteúdos externos incorporados ao conteúdo, portanto o WordPress não consegue adivinhar como você gostaria de exibi-los.
Como prática recomendada, ele o alinha automaticamente à esquerda, deixando a seu critério o ajuste do alinhamento, se necessário.
Ao alinhar o vídeo ao centro, os usuários terão uma experiência melhor ao visualizar seu conteúdo. Dessa forma, você não terá um espaço em branco perceptível em um dos lados da página, o que poderia dar uma aparência não profissional.
Além disso, se você carregar vídeos diretamente no WordPress, o mesmo acontecerá com eles se a largura for menor que a área de conteúdo. O WordPress os alinhará à esquerda por padrão.
Dito isso, vamos ver como você pode centralizar facilmente um vídeo em um site do WordPress. Abordaremos o editor de blocos e o editor clássico, portanto, você pode clicar nos links abaixo para ir para qualquer seção.
Como centralizar o vídeo no editor de conteúdo do WordPress
Se você quiser que o vídeo ocupe toda a largura da área de conteúdo, a melhor maneira de fazer isso é adicionar um URL de vídeo do YouTube ou do Vimeo diretamente no editor de conteúdo do WordPress.
Primeiro, você precisará editar um post ou uma página ou adicionar um novo. Quando estiver no editor de conteúdo, basta colar o link para o vídeo. O WordPress incorporará o vídeo automaticamente.
Em seguida, selecione o bloco Vídeo e clique na opção “Change Alignment” (Alterar alinhamento). No menu suspenso, você pode escolher a posição do vídeo.
O WordPress permite que você escolha entre os seguintes alinhamentos:
- largura ampla
- largura total
- alinhar à esquerda
- Alinhar centro
- Alinhar à direita.
Em seguida, selecione a opção “Alinhar centro”.
Depois disso, você pode visualizar e publicar sua página ou post.
O vídeo agora estará alinhado ao centro.
No entanto, às vezes, por um motivo ou outro, você pode precisar usar o código incorporado. Nesse caso, você precisará adicionar um pouco de HTML simples ao código de incorporação do seu vídeo.
Primeiro, você precisa clicar nos três ícones pontilhados no bloco de vídeo. Depois disso, você pode selecionar a opção “Editar como HTML” no menu suspenso.
Em seguida, você pode inserir o seguinte trecho de código HTML ao redor do código de incorporação do vídeo:
<div style="text-align:center;">
/// your video embed code goes here
</div>
Veja como ficaria seu código de incorporação com o HTML personalizado.
Agora você pode salvar suas alterações e visualizar o post ou a página. Agora você sabe como centralizar um vídeo em HTML.
Outra abordagem é aumentar manualmente a largura do vídeo para que ele caiba na área de conteúdo. Para isso, você precisa adicionar ou alterar o parâmetro “width” no código de incorporação.
<iframe width="760" height="315" src="https://www.youtube.com/embed/4YpyiJ05YOg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Como centralizar o vídeo no Editor clássico
Se estiver usando o editor Classic, você poderá centralizar os vídeos editando uma postagem ou criando uma nova.
Quando estiver no editor, mude para a visualização de texto. Agora, digite o seguinte código HTML:
<div style="text-align:center;">
/// your video embed code goes here
</div>
Apenas certifique-se de substituir “o código de incorporação do seu vídeo vai aqui” pelo código de incorporação do seu vídeo.
Quando isso for feito, ele terá a seguinte aparência:
Agora você pode visualizar e publicar sua página.
Basta acessar seu site para ver o vídeo alinhado ao centro.
Esperamos que este artigo tenha ajudado você a aprender como centralizar um vídeo no WordPress. Talvez você também queira ver nosso guia sobre como iniciar um blog no WordPress e os plug-ins obrigatórios do WordPress.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Syed Balkhi says
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!
A Owadud Bhuiyan says
if I have three YouTube videos, can I show them in the same row by adjusting the width?
Thanks for the tips.
WPBeginner Support says
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/
Administrador
Tom Z says
Thanks for posting this, it worked and was very helpful!
WPBeginner Support says
Glad to hear our guide was helpful!
Administrador
Marc says
Thanks for the info!!
WPBeginner Support says
You’re welcome!
Administrador
S says
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 says
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/
Administrador
Diane says
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 says
With the YouTube embed block there should be a section when you select the block to set a specific alignment that you can use.
Administrador
Marshall says
The tip sounds great, but every time I “save” and come back, it’s gone.
WPBeginner Support says
You may want to try to clear any caching on your site to ensure you’re not seeing the cached version of the page.
Administrador
Himanshu says
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 says
Hi Himanshu,
You can try switching to the HTML editor to add the code. Hopefully it would work then.
Administrador
Young says
thank you for the article! very helpful
Deb says
Thank you, this article was very helpful!
Carole says
Adding the div html around the embed code worked like a charm. Thanks!
bilikid says
Thanks for this. Definitely plan on trying it!!