Video Responsive de Youtube
Para tener un video de youtube incrustado en nuestra página y que se adapte de forma "responsive" según el tamaño de pantalla debemos hacer lo siguiente:
Debemos meter el vídeo incrustado (iframe *) dentro de un contenedor (parrafo o div) al que le añadiremos una clase CSS que será la que haga la magia. Es necesario quitar el ancho y alto del iframe del video.
<div class="video-youtube-responsivo"> <iframe src="https://youtu.be/XXXXXXXXXX" frameborder="0" allowfullscreen></iframe> </div>
Luego debemos meter el código CSS de la clase del contenedor que hara que nuestro/s video/s sean responsivos
.video-youtube-responsivo { position: relative; overflow: hidden; padding-top: 30px; padding-bottom: 56.25%; height: 0; } .video-youtube-responsivo iframe, .video-youtube-responsivo object, .video-youtube-responsivo embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } Ver ejemplo:
| Diseño