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:
style="width: 50%; float: right;"
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.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
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.
Eso es un shortcode, ahí ya tiene ajustes predefinidos
¡Gracias!
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ú?
Mi gran duda es, como poner el chat de youtube en wordpress ya que el plan es trasmitir un webinar.
Alguien me puede ayudar?
Es lo mismo, al meter el iframe aplica el truco.
Funciona perfectamente, ¡gracias por la información!
Me funciona bien pero al momento de verlo en el móvil me abarca toda la pantalla, No se hizo responsive 🙁