Cómo alinear vídeos de YouTube y otros servicios con el texto en WordPress

Insertar vídeos de YouTube y otros servicios es muy sencillo en WordPress, solo tienes que copiar la URL y se activan automáticamente, se convierten en su reproductor, el problema que quiero tratar hoy es que ocupan todo el ancho del contenido, y a veces nos gustaría que estuviese integrado, con el texto flotando a su alrededor, igual que podemos hacer con las imágenes.

Y no estoy hablando de que siempre estén los vídeos alineados a derecha o izquierda con el texto alrededor, que eso sería fácil con un poco de CSS, sino a decidir en una entrada concreta si un vídeo está a la derecha o izquierda, con el texto flotando a su alrededor.

Pues bien, la solución está en no usar la característica oEmbed que permite mostrar el reproductor solo con copiar y pegar la URL del vídeo, sino usando el código iframe que también nos suelen ofrecer estos servicios, y que al menos YouTube sí que ofrece.

Para ello, por ejemplo en YouTube, haz clic en “Compartir“.

En vez de compartir ya, pulsa en el enlace de “Insertar:

Lo que te abre una ventana donde ya tenemos el código iframe a insertar:

En tu editor de WordPress cambia a la pestaña HTML y pega donde quieras que aparezca el código iframe.

El código será algo así:

Pues bien, el truco está en modificar ese código iframe. Lo primero es quitar los parámetros de ancho y alto (widht y height), a continuación añadiremos lo siguiente:

Con lo que el código quedaría tal que así:

Si te fijas, hemos indicado que el ancho ocupe solo el 50% del bloque disponible y, en esta ocasión, le hemos indicado que el vídeo se coloque a la derecha (float: right) del contenido.

¿Quieres que esté a la izquierda? Pues simplemente cambia right por left. ¿Quieres el vídeo un poco más grande o pequeño? Cambia el porcentaje de ancho.

Lo que conseguimos es exactamente lo que estás viendo aquí a la derecha, que el vídeo está a la derecha del texto, y este lo rodea por su izquierda.

Es lo mismo que podríamos hacer con una imagen, definiendo su alineación con respecto al texto, pero en este caso un pelín más complicado, modificando estos parámetros en el mismo código.

Y eso es todo, que usted lo alinee bien. Espero que te haya gustado el truquito.

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (7 votos, promedio: 4,29 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

4 comentarios

  1. Excelente información de ayuda, he querido probar para la característica [video] pero no funciona. Se coloca a la izquierda de la página, o mejor dicho al editar el objeto vídeo veo el recuadro resaltado que ocupa todo el ancho de página y el vídeo del interior se coloca a la izquierda. ¿No vale entonces para esta característica? Un saludo.

    Publica una respuesta
  2. Hola Fernando, cómo estás?
    El problema de éste tipo de solución, según mi experiencia, es que no es responsive. Es decir que si abres la página desde un móvil el video se achica igualmente al 50% y ésto puede resultar incómodo para verlo. En móviles siempre es mejor que un video tome el ancho completo.
    ¿Qué piensas tú?

    Publica una respuesta

Envía un comentario

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