Error when changing height of an element

Asked

Viewed 23 times

2

I have a iframe with a youtube video inside it.

I want him to have the 100% page readout, that’s okay, 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
  • 1

    There is no Document the correct is Document.

  • 1

    Tbm is not how you change css through Javascript, that’s how it is: document.getElementById('video').style.height = altura;

1 answer

2


Trouble with the code:

The correct is document (all tiny).

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

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

If you’re using jQuery, the right thing would be:

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

With pure Javascript would be:

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

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.