¿Quieres centrar un vídeo en WordPress?
Por defecto, si el ancho de su vídeo es menor que el área de su artículo, entonces WordPress lo alinea automáticamente a la izquierda, dejando espacio en blanco extra en el lado derecho.
En este artículo, le mostraremos cómo centrar fácilmente un vídeo en WordPress.
¿Por qué centrar los vídeos en WordPress?
Cuando incrustas un vídeo en WordPress, por defecto se alinea automáticamente a la izquierda. Esto se debe a que los vídeos son contenido externo incrustado en el contenido, por lo que WordPress no se ha podido imaginar cómo le gustaría mostrarlo.
Como práctica recomendada, lo alinea automáticamente a la izquierda, dejándole a usted la posibilidad de ajustar la alineación si es necesario.
Al alinear el vídeo en el centro, los usuarios tendrán una mejor experiencia de visualización de su contenido. De esta forma, no tendrás espacios en blanco notables en un lado de la página, lo que podría dar un aspecto poco profesional.
Además, si subes vídeos directamente a WordPress, les ocurrirá lo mismo si su anchura es menor que tu área de contenido. WordPress los alineará a la izquierda por defecto.
Dicho esto, vamos a ver cómo se puede centrar fácilmente un vídeo en un sitio web de WordPress. Cubriremos tanto el editor de bloques como el editor clásico, así que puedes enlazar los enlaces de abajo para saltar a cualquier sección.
Cómo centrar un vídeo en el editor de contenido de WordPress
Si desea que su vídeo ocupe todo el ancho de su área de contenido, la mejor forma de hacerlo es añadiendo una URL de vídeo de YouTube o Vimeo directamente en el editor de contenido de WordPress.
En primer lugar, tendrás que editar una entrada o una página o añadir una nueva. Una vez que estés en el editor de contenido, simplemente enlaza el vídeo. WordPress incrustará el vídeo automáticamente.
A continuación, selecciona el bloque Vídeo y haz clic en la opción “Cambiar alineación”. En el menú desplegable, puede elegir la posición del vídeo.
WordPress le permite elegir entre las siguientes alineaciones:
- gran anchura
- ancho total
- alinear a la izquierda
- alinear centro
- alinear a la derecha.
Seleccione la opción “Alinear al centro”.
A continuación, puedes previsualizar y publicar tu página o entrada.
El vídeo se alineará ahora en el centro.
Sin embargo, a veces, por una razón u otra, puede que necesites utilizar el código incrustado. En ese caso, tendrás que añadir algo de HTML sencillo alrededor del código incrustado de tu vídeo.
En primer lugar, tienes que hacer clic en los 3 iconos punteados del bloque de vídeo. Después, puedes seleccionar la opción “Editar como HTML” en el menú desplegable.
A continuación, puedes introducir el siguiente fragmento de código HTML alrededor del código de incrustación del vídeo:
<div style="text-align:center;">
/// your video embed code goes here
</div>
Este es el aspecto que tendría tu código incrustado con el HTML personalizado.
Ahora puede guardar los cambios y obtener una vista previa de la entrada o página. Ahora ya sabes cómo centrar un vídeo en HTML.
Otro método consiste en aumentar manualmente la anchura del vídeo para que quepa en el área de contenido. Para ello, debe añadir o modificar el parámetro “width” en el código incrustado.
<iframe width="760" height="315" src="https://www.youtube.com/embed/4YpyiJ05YOg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Cómo centrar un vídeo en el editor clásico
Si utilizas el editor clásico, puedes centrar los vídeos editando una entrada o creando una nueva.
Una vez en el editor, cambia a la vista Texto. Ahora introduce el siguiente código HTML:
<div style="text-align:center;">
/// your video embed code goes here
</div>
Asegúrate de sustituir “el código de incrustación de tu vídeo va aquí” por el código de incrustación de tu vídeo.
Una vez hecho esto, se verá algo como esto:
Ya puedes previsualizar y publicar tu página.
Sólo tiene que visitar su sitio web para ver el vídeo alineado en el centro.
Esperamos que este artículo te haya ayudado a aprender cómo centrar un vídeo en WordPress. También puedes consultar nuestra guía sobre cómo crear un blog en WordPress y los plugins imprescindibles para 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.
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!!