Classes CSS para fazer qualquer embed responsivo.
Permita que o browser determine o tamanho do seu video baseado na largura do bloco que ele está criando assim uma scala dinamica de acordo com o device que seu site é acessado..
Esse css é aplicado direto aos elementos <iframe>, ,
| // Embeds responsive | |
| // chupinhado do Bootstrap 3.7 | |
| // Credit: Nicolas Gallagher and SUIT CSS. | |
| .embed-responsive { | |
| position: relative; | |
| display: block; | |
| height: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| .embed-responsive .embed-responsive-item, | |
| .embed-responsive iframe, | |
| .embed-responsive embed, | |
| .embed-responsive object, | |
| .embed-responsive video { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| height: 100%; | |
| width: 100%; | |
| border: 0; | |
| } | |
| // Modifier class for 16:9 aspect ratio | |
| .embed-responsive-16by9 { | |
| padding-bottom: 56.25%; | |
| } | |
| // Modifier class for 4:3 aspect ratio | |
| .embed-responsive-4by3 { | |
| padding-bottom: 75%; | |
| } |