Centrar vídeo en wordpress

Cuando usamos «iframe» para inserta un vídeo, centrarlo no es complicado porque basta con utilizar la sintaxis que usamos con cualquier párrafo, es decir

<p style="text-align: center;"><iframe...></iframe</p>

El problema es cuando usamos el reproductor de medios propio de WordPress. No podemos centrarlo ni tampoco alinearlo a la derecha o la izquierda porque su aspecto está definido en una hoja de estilos propia del sistema. En concreto, wp-mediaelement.css (dentro de wp-includes/js/mediaelement/). No obstante hay una solución:
1.- Editamos la hoja de estilos de nuestra tema (normalmente style.css).
2.- Añadimos las siguientes líneas:

NOTA: para el caso de vídeos subidos a nuestro servidor la regla válida es «.videocentrado .wp-video«, Para vídeos fuera de nuestro servidor (Yotube, vimeo, etc), es de aplicación «.videocentrado .embed-wrap«.

.videocentrado .wp-video, .videocentrado .embed-wrap {
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
margin-top:20px;
}

3.- Ahora, cuando editemos una entrada e incrustemos un vídeo, debemos hacerlo de la siguiente forma:

<div class="videocentrado">Código del vídeo</div>

La «div» la pondremos manualmente en la pestaña «Texto» del editor de texto.
4.- Para alinear a la izquierda o a la derecha:

.videoizquierda .wp-video, .videoizquierda .embed-wrap {
	margin-bottom:20px;
	margin-top:20px;
	margin-right:20px;
	float:left;
}
.videoderecha .wp-video, .videoderecha .embed-wrap {
	margin-bottom:20px;
	margin-top:20px;
	margin-left:20px;
	float:right;
}

En los dos últimos casos, si insertamos texto dentro de la «div», éste quedará «flotando» a la derecha o izquierda respectivamente.

NOTA: para el caso de vídeos subidos a nuestro servidor la regfuera de nuestro servidor (Yotube, vimeo, etc), debemos usar «embed-wrap» en lugar de «wp-video».

4 comentarios


  1. Buena información, la gente se tiene que animar más a aprender un poco de informática básica, esto puede hacer que un artículo tenga una mejor pinta para el visitante, además, con este procedimiento el vídeo se visualiza correctamente en dispositivos móviles, ¿no?
    Saludos

    Responder

    1. Supongo que en dispositivos móviles también debería quedar centrado o «flotando» a un lado u otro.
      Saludos

      Responder

  2. Si si funciona muy bien, en PC y celu, no lo podia hacer y eso que se algo de codigo, buenisimo amigo, gracias

    Responder

    1. De nada. En cuanto a centrar el vídeo en móviles, tal vez cambie la clase y sea distinta a .wp-video. De todas formas, puedes acudir al soporte de WordPress y plantear allí el problema.

      Responder

Deja un comentario

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