Nota: Este exemplo foca em mostrar como garantir que o player iframe mantenha a proporção 16:9. Esta é uma técnica amplamente usada e pode ser usada com outras proporções de aspecto.
A largura e a altura do player determina a proporção. Recomendamos uma proporção de 16:9.
Pode haver casos em que você esteja visualizando um vídeo em um site mobile ou em uma página da através de um navegador desktop responsiva e o vídeo apareça com barras pretas ao lado ou não se encaixa no layout. Esses pequenos problemas podem ser causados pela configuração da página da web para manter a escala e o tamanho corretos do player. Como os sites são responsivos e fluidos, queremos garantir que o player seja flexível trabalhando com páginas dinâmicas. Recomendamos a seguinte técnica para manter o player responsivo e preservar a proporção do vídeo
Como manter a proporção?
Exemplo 1. com HTML e CSS
Este é um truque CSS simples e comum para preservar a proporção. O exemplo abaixo é para uma proporção de 16:9, no entanto, isso pode ser alterado para funcionar para outras proporções de aspecto.
- No HTML, coloque o player <iframe> dentro de um container <div>.
- No CSS da <div>, adicione um valor percentual para padding-bottom e defina a posição como relativa, isso irá manter a proporção do container. O valor do preenchimento determina a proporção. ou seja, 56,25% = 16:9.
- No CSS para o <iframe>, defina a posição como absoluto, ele assumirá uma posição fixa em relação ao seu elemento pai <div>.
HTML
<div class="video_wrapper">
<iframe frameborder="0" width="100%" height="100%" src="https://www.streamify.com.br/Your_streamify_embed_URL" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
</iframe></div>CSS
.video_wrapper {position: relative;
padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
}iframe {position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;}Exemplo 2. Incorporação manual apenas com HTML
Este exemplo é semelhante ao Exemplo 1, mas toda a configuração e estilo são configurados no HTML.
<div style="position:relative;padding-bottom:56.25%;">
<iframe style="width:100%;height:100%;position:absolute;left:0px;top:0px;"
frameborder="0" width="100%" height="100%"
allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
src="YOUR_STREAMIFY_EMBED_URL">
</iframe>
</div>
Outras proporções
Essa técnica pode funcionar com outras proporções (1:1, 4:3, 3:2, 8:5). O valor de preenchimento ('padding-bottom:') determina a proporção, altere os valores percentuais de preenchimento inferior para alterar a proporção.
| Aspect Ratio | Padding-Bottom |
| 1:1 | 100% |
| 16:9 | 56.25% |
| 4:3 | 75% |
| 3:2 | 66.66% |
| 8:5 | 62.5% |