I have iframe
with a youtube video inside it.
I want it to have the 100% width of the page, this is ok, but I want the height to be proportional to the width.
<div style="text-align:center;">
<iframe id="video" style="width:100%; margin-bottom:0px;" src="https://www.youtube.com/embed/zVWJR4K5Vt4?rel=0"frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<script>
//pego a largura
largura = screen.width;
//utilizo uma regra de três pra calcular a altura
altura = largura * 315 / 560;
//aqui é onde eu tento alterar a altura via código, mas não está funcionando
Document.getElementById('video').css('height', altura);
</script>