Aquí te cuento cómo insertar un vídeo de Youtube en html en tu blog o sitio web con el objetivo que puedas compartir tu contenido multimedia con los lectores de tu bitácora.
Para que puedas insertarlo en cualquiera de los mejores temas premium WordPress o en la plantilla que estés empleando actualmente.
Y es que cuando subimos nuestras producciones audiovisuales a nuestro canal lo que deseamos es que reciban visualizaciones y acciones sociales.
Pues una de las formas para facilitarlo es incrustando el vídeo en nuestro sitio web o en cualquier otro medio que permita el uso de html o a través del empleo de un shortcode agregando la propia ID del contenido.
Otro de los efectos positivos sobre el vídeo es que ayuda a su propio posicionamiento SEO en Youtube.
De igual forma también es posible insertar un vídeo de cualquier otro canal.
En propietario del canal puede, según el vídeo, optar por permitir que otros usuarios puedan incrustar el contenido o no.
Pasamos ya a ver qué hay que hacer, ¿vienes? 🙂
Contenido
Obtener código html para insertar el video de Youtube
En este punto te cuento como obtener el código html necesario que nos va a permitir mostrar el contenido multimedia en nuestro blog.
Un primer paso es acceder a la página del vídeo de Youtube y seleccionar la opción Insertar.
Una vez hecho esto hay que clicar la opción de Mostrar más, abriéndose una serie de opciones como muestra la siguiente imagen.
Las opciones son las siguientes:
- Tamaño del vídeo. Elegir las dimensiones deseadas siempre pensando en el ancho del contenedor final del vídeo. Es posible elegir entre unas predefinidas o indicar unas personalizadas definiendo las dimensiones.
- Mostrar sugerencias de vídeos. La activamos si deseamos que muestre vídeos relacionados al final de la reproducción del que hemos insertado.
- Mostrar controles del reproductor.
- Mostrar título y acciones. Opciones de cómo se ve.
- Activar el modo de mejora de la privacidad. Activando este modo evitas que Youtube almacene información sobre los usuarios que visitan tu web eso sí, si no ven el vídeo.
Una vez hemos configurado las mismas ya se nos habrá generado el html iframe que debemos copiar para pegarlo en el lugar que deseemos de nuestro blog.
Ya sea una página o en el contenido de un post.
Eso sí, siempre desde la pestaña de html o código, no desde la forma visual y así nos aseguramos que se mostrará ok.
Incrustar una lista de reproducción
De igual forma es interesante si deseamos incrustar una lista de de reproducción, pongamos por ejemplo que nuestro post es el funcionamiento de una herramienta y hemos generado una lista de reproducción con una serie de vídeos que hacen referencia a la misma.
Llegado este caso también podemos insertar nuestro iframe en el contenido del post.
El proceso es similar al anterior, desde la propia lista presionamos el botón de Compartir y seleccionamos la opción de Insertar.
Seleccionamos las opciones deseadas y una vez generado nuestro iframe lo pegamos en el contenido del post o de la página.
Como hacer el video incrustado responsive o adaptativo con html y css
Cuando definimos las dimensiones a la hora de insertar un vídeo desde las opciones habitualmente pensamos en las visualizaciones a través del equipo de sobremesa.
Y se corresponden con un ancho y un alto definido en píxeles.
Pero hay que tener en cuenta la importancia del tráfico a través de dispositivos móviles.
Si te fijas una vez lo incrustas y lo visitas desde el smartphone verás que el vídeo se ve muy alargado con lo que el diseño no se ajusta.
De este modo lo mejor es proporcionar unas dimensiones al dispositivo desde donde se visualice por lo que a través de reglas CSS podemos hacer que nuestro vídeo sea responsive y se muestre adaptado al tamaño de pantalla desde donde se vaya a reproducir.
Vamos pues a ver cómo hacerlo.
En primer lugar generamos nuestro html que tiene el siguiente aspecto:
<div class="video"> <!-- Iframe copiado y pegado de Youtube --> <iframe width="853" height="480" src="https://www.youtube.com/embed/Ke2W9Y7TCVs?rel=0&showinfo=0" frameborder="0" allowfullscreen=""></iframe> </div> |
Hemos encerrado el código del iframe en un div al que le hemos dado una clase.
Ahora mediante CSS que aplicaremos al div a través de su clase y al iframe vamos a conseguir que nuestro vídeo se muestre de forma responsive.
El código es el siguiente:
.video { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
Una vez lo tengamos todo listo sólo bastará con hacer la comprobación que se ve de forma fluida.
Haciendo la ventana de nuestro navegador más pequeña veremos que se ajusta a las dimensiones del mismo.
A continuación te dejo una referencia con información adicional sobre los vídeos responsive.
Conclusión
A lo largo del post hemos visto el paso a paso para insertar vídeos de Youtube mediante el html en nuestro sitio web o blog.
Además la forma tan sencilla de ofrecer un contenido que se adapte a cualquier tipo de dispositivo siendo indiferente el tamaño de la pantalla.
Ah! Y no olvides compartir este post 😉 Gracias!
Valora y comparte, ¡gracias!
(1 votos, promedio: 5,00 de 5)
Cargando…
