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 ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

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

Autor: Fernando Tellado

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

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Pin It on Pinterest

Share This