Insertar vídeo YouTube responsive
En el artículo de hoy vamos a explicar cómo insertar un vídeo de YouTube responsive a través de un ejemplo gráfico.
Pero antes de mostrar cómo se inserta un vídeo de YouTube de manera responsive os contaré que un diseño responsive redimensiona y coloca los elementos de una página web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario.
Pero antes de mostrar cómo se inserta un vídeo de YouTube de manera responsive os contaré que un diseño responsive redimensiona y coloca los elementos de una página web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario.
PASOS PARA INSERTAR UN VÍDEO DE YOUTUBE DE MANERA RESPONSIVE
- Paso 1. En primer lugar deberemos seleccionar el vídeo de YouTube que queremos compartir.
- Paso 2. A continuación haremos clic sobre el botón compartir y seleccionamos la opción insertar.
- Paso 3. Copiamos el código del vídeo, en nuestro caso hemos copiado el siguiente:
<iframe width="560" height="315" src="https://www.youtube.com/embed/8zLUdceTMrI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> - Paso 4. Una vez hemos copiado el código debemos limpiarlo de los atributos que no necesitaremos (width, height, etc), el código resultante es el siguiente:
<iframe src="https://www.youtube.com/embed/8zLUdceTMrI" frameborder="0" allowfullscreen></iframe> - Paso 5. El siguiente paso es poner el iframe del vídeo en un contenedor responsive que llamaremos video-responsive
<div class="video-responsive">
<iframe src="https://www.youtube.com/embed/8zLUdceTMrI" frameborder="0" allowfullscreen></iframe>
</div>
- Paso 6. En último lugar deberemos añadir a nuestro CSS las características del nuevo div que hemos creado:
/* PERSONALIZACIÓN VIDEO-RESPONSIVE
------------------------------------------------- */
.video-responsive {
position: relative;
padding-top: 30px;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Si te ha gustado el artículo sobre cómo insertar un vídeo de YouTube responsive puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.