- Paso 1: Obtener el código de inserción del video
- Paso 2: Insertar el video en HTML
- Paso 3: Estilizar el video con CSS
- Explicación del código CSS
- Conclusión
- Recursos
Insertar un video de YouTube en tu página web es muy sencillo y se puede lograr utilizando solo HTML y CSS. A continuación, te mostraré cómo hacerlo paso a paso.
Paso 1: Obtener el código de inserción del video
Primero, necesitas obtener el código de inserción del video de YouTube. Ve al video que deseas incrustar, haz clic en 'Compartir' y luego en 'Insertar'. Copia el código de inserción que YouTube te proporciona.
Paso 2: Insertar el video en HTML
Aquí tienes un ejemplo de cómo se verá el código HTML para insertar un video:
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>Paso 3: Estilizar el video con CSS
El siguiente paso es aplicar estilos con CSS para asegurarnos de que el video responda al tamaño del contenedor y conserve su relación de aspecto. Utilizaremos la propiedad moderna `aspect-ratio`.
.video-container {
position: relative;
width: 100%;
max-width: 100%;
aspect-ratio: 16/9;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Explicación del código CSS
- `.video-container`: Este contenedor tiene un ancho máximo del 100% del contenedor padre y usa la propiedad `aspect-ratio` para mantener una relación de aspecto de 16:9.
- `.video-container iframe`: Este iframe ocupa toda la anchura y altura del contenedor, logrando que el video se redimensione proporcionalmente sin perder su relación de aspecto.
Conclusión
Siguiendo estos sencillos pasos, puedes incrustar un video de YouTube en tu página web y asegurarte de que se vea correctamente en cualquier dispositivo usando técnicas modernas de CSS. ¡Espero que este tutorial te haya sido de ayuda!
Recursos
