A lo largo de los años en WPBeginner, hemos creado muchos vídeos y los hemos añadido a las entradas de nuestro blog de WordPress. Sin embargo, de vez en cuando nos encontramos con problemas de alineación central de los vídeos cuando se añaden al artículo.
Lo que encontramos fue que si el ancho de tu video es menor que el área de tu artículo, entonces WordPress automáticamente lo alinea a la izquierda, dejando espacio en blanco extra en el lado derecho. Si tienes el mismo problema, esta guía es para ti.
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, 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. Puede que también quieras ver nuestra guía sobre cómo añadir caracteres especiales en entradas de WordPress y consejos esenciales para usar shortcodes en 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/
Administrador
Tom Z
Thanks for posting this, it worked and was very helpful!
WPBeginner Support
Glad to hear our guide was helpful!
Administrador
Marc
Thanks for the info!!
WPBeginner Support
You’re welcome!
Administrador
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/
Administrador
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.
Administrador
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.
Administrador
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.
Administrador
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!!