La gran mayoría de páginas web suelen insertar vídeos de YouTube o Vimeo. Son una pieza fundamental dentro del diseño de un sitio web y por lo tanto debemos hacer que se vea de forma correcta en cualquier dispositivo.
Cómo insertar un vídeo de YouTube en una página web
Lo primero de todo, es conseguir el código iframe del vídeo que queremos insertar en nuestra página web. Para ello iremos a YouTube y debajo de nuestro vídeo hacemos clic en Compartir > Insertar y nos aparecerá el código, lo copiamos para pegarlo más tarde en nuestro sitio web.
En el lugar de nuestra web donde queramos que se visualice el vídeo, creamos un contenedor div alrededor del código iframe con la clase video-container.
<div class=»video-container»><iframe…….></iframe></div>
Hacer responsive un vídeo de YouTube
Para hacer responsive el vídeo, debemos añadir un poco de CSS en nuestra hoja de estilos. La primera declaración CSS se dirige al contenedor del vídeo y la segunda a lo que está dentro, en este caso, el iframe, también se puede aplicar esto a objetos e incrustar elementos.
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Podéis personalizarlo a vuestro gusto. En esta web cuando pongo un vídeo retoco la anchura, la altura y los padding pero para dispositivos móviles lo vuelvo a dejar al 100% tanto la anchura como la altura y el padding-bottom en porcentaje.
Si estrecháis o reducís manualmente la pantalla, veréis como el vídeo se adapta al nuevo tamaño de la pantalla.
¿Debo incrustar mis vídeos de YouTube en mi sitio web?
Sí, incrustar tus vídeos de YouTube en tu sitio web puede ser una excelente estrategia.
Aquí te dejo algunas razones clave:
- Mejora la experiencia del usuario: Los visitantes pueden ver tus vídeos sin salir del sitio, lo que mantiene su atención en tu contenido. Los vídeos hacen que tu sitio sea más dinámico.
- Aumenta el tiempo de permanencia: Los vídeos suelen captar más tiempo de atención, lo que puede reducir la tasa de rebote.
- Refuerza tu marca personal o de negocio: Incrustar vídeos directamente relacionados con tu contenido fortalece tu mensaje y autoridad.
- Mejora el SEO: Aunque el vídeo en sí no afecta directamente al posicionamiento, sí lo hace el comportamiento del usuario, como el tiempo en página y las interacciones.
- Facilita el contenido multimedia: Para muchos usuarios, ver un vídeo puede ser más accesible que leer un texto largo.
Solo asegúrate de que los vídeos estén bien optimizados (títulos, descripciones, miniaturas) y sean relevantes para el contenido del sitio.