Cómo centrar un video de Youtube con html

Insertas código html de un vídeo y este se queda a la izquierda del post, (no es una pregunta 😉 esto es así. Solo por cuestión de estética podemos añadir un poquito más de código para dejar perfectamente tu video en el centro del post.

Al menos en wordpress, existen hasta 2 maneras (o 3 si contamos el pegado directo de la URL del vídeo en el post). Una de ellas lo hacemos al igual que cuando añadimos un objeto, salvo que insertamos desde URL. La otra es copiar el código html del vídeo en Youtube, Vimeo, etc. y pegarlo en la sección html del post.

Yo prefiero esta, por las siguientes razones:

  1. Evitar mostrar sugerencias de otros vídeos al finalizar la reproducción del mio.
  2. No mostrar los controles del reproductor.
  3. No mostrar el título del vídeo y las acciones del reproductor.
  4. Activar el modo de mejora de la privacidad.
  5. Decidir las dimensiones que visualización del vídeo.
  6. Evitar las bandas negras que aparecen en las partes superior e inferior.
  7. Centrar el vídeo en el post.

Las cuatro primeras opciones se consiguen directamente antes de copiar el código desde la misma plataforma del vídeo. Las otras dos, podemos solucionarlas fácilmente desde el html del post.

Pasos para centrar un video en un post con html

Vamos a ver como podemos centrar el video con html y además podrás recurrir a este post, si lo prefieres para copiar directamente el código adicional que necesitas para centrar un video con html, sea cual sea realmente la plataforma con la que se haya creado el vídeo.

Paso 1.- pega el embed en la opción html de tu post.

Paso 2.- copia este trozo de html (que he coloreado en rojo), antes de que comience el código del vídeo.

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

Paso 3.- Pega también este final en html al cierre justo del embed del video.

</div>

La cosa queda de la siguiente manera:

<div style=»text-align:center;»><iframe width=»560″ height=»315″ src=»https://www.youtube.com/embed/-Hn1D7KZn58?rel=0&amp;controls=0&amp;showinfo=0″ frameborder=»0″ allow=»autoplay; encrypted-media» allowfullscreen></iframe></div>

De esta manera, sea cual sea el espacio o el tamaño de tu vídeo, este quedará totalmente centrado en el post.

A por cierto, si ves que no te ha funcionado, posiblemente sea porque hiciste el proceso por partes. Es decir, debes de añadir ambos trozos de texto antes de actualizar el post. Así que repite la operación: copia texto original, pégalo e incluye el html de centrado y ahora ya puedes actualizar.

Así de sencillo! Es más! Prueba a centrar con este inicio con html otros «iframes», como por ejemplo un mapa de ubicación de Google Maps. ¿Qué te parece? ¡Funciona igual!.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *