CERRAR

¿Cómo añadir un video responsive de YouTube o Facebook a mi web?

El uso de videos es muy común en publicaciones de blogs o webs, del mismo modo el uso de dispositivos móviles. Sin embargo cuando incrustamos un video, este no cambia de tamaño. Para ello necesitamos agregar dos códigos. Uno es en la hoja de estilos, o en todo caso dentro del <head>. Y el otro donde se desea que vaya el video.

CCSS: 56.25% es para la proporción 16:9 y obviamente podemos ponerle el nombre que nos resulte conveniente en lugar de miVideo.

.miVideo {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.miVideo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

HTML: El iframe que copiamos de YouTube o Facebook, lo pegamos dentro del <div>

<div class=”MiVideo”>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/erG5rgNYSdk” frameborder=”0″ allowfullscreen></iframe>
</div>

El resultado será:

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *