Hoy vamos a aprender a cargar los Iframe de vídeos de YouTube Responsive.
Para conseguir que los vídeos que empotramos en nuestras páginas web sean responsive, debemos crear estas reglas css:
1 | .video-container { |
2 | position:relative; |
3 | padding-bottom:56.25%; |
4 | padding-top:30px; |
5 | height:0; |
6 | overflow:hidden; |
7 | } |
8 |
9 | .video-container iframe, .video-container object, .video-container embed { |
10 | position:absolute; |
11 | top:0; |
12 | left:0; |
13 | width:100%; |
14 | height:100%; |
15 | } |
Y por ultimo utilizar la clase video-container en el div que contenga el iframe. Ejemplo:
1 | <div class="video-container"> |
2 | <!-- cargo mi iframe de youtube --> |
3 | </div> |
Pues con esto sabemos crear un iframe de videos de YouTube Responsive.
