Error changing height of an element

Question

Error changing height of an element

Navigation

#1 by (2 votes)

2

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>

javascript

asked by anonymous 31.05.2018 / 19:09

1 answer

Hover-enabled bootstrap tabview Can I use the figcaption tag without using figure?

score 2 · Accepted Answer

You have problems with the code:

Correct is document (all lowercase).

CSS values need a unit ( px , em , % etc ...).

The .css() method is a jQuery method, and you are selecting the element as a JavaScript object: document.getElementById('video') .

If you are using jQuery, the correct one would be:

$("#video").css("height", altura+"px");

With pure JavaScript it would be:

document.getElementById('video').style.height = altura+"px";