Hoy en día la inserción de vídeo en un sitio responsivo para que el mismo se adapte automáticamente al ancho del dispositivo, puede ser complicada., y no hemos visto a la necesidad de en su mayoría de veces dejarlo a si o no insertar ningún vídeo en nuestro blog o pagina web, lo que nos perjudica ya que no nos estamos adaptando a los cambios de la tecnología.
Aquí en este vídeo tutorial te explico como hacerlo de forma correcta solo con un pequeño código CSS.
Estos son los atributos CSS para ese div contenedor :
/* =========================================================
Video Responsive
============================================================ */#contenedor {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
display:block;
}#contenedor iframe,
#contenedor object,
#contenedor embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
De esta forma nuestro vídeo se adaptará proporcionalmente al tamaño del dispositivo.