title: Get width and height of HTML5 Video using native JavaScript
body: <p>I am trying to get width and height of  tag, I am using the following markup:</p>
  
  <pre><code>&lt;div class="masked" id="video_container"&gt;
      &lt;video id="video" loop="loop" muted="muted" tabindex="0" style="width: 100%; height: 100%;"&gt;
          &lt;source src="..." type="..."&lt;/source&gt;
          &lt;source src="..." type="..."&lt;/source&gt;
      &lt;/video&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The key part is that width and height attributes are both set to 100%, and when window is changed aspect ratio of video is saved, but I cannot get it's actual width and height. </p>
  
  <p>I tried to get value using offsetWidth and offsetHeight properties, but they are return actual size of the video.</p>
  
  <p><strong>Edit:</strong> </p>
  
  <p>This is the piece of code that working for me:</p>
  
  <pre><code>var videoActualWidth = video.getBoundingClientRect().width;
  var videoActualHeight = video.getBoundingClientRect().height;
  
  var aspect = videoActualWidth / videoActualHeight;
  
  if (w / h &gt; aspect) {
      video.setAttribute("style", "height: 100%");
  } else {
      video.setAttribute("style", "width: 100%");
  }
  </code></pre>
  
  <p>Thanks!</p>