title: Dynamically Adjusting an element with javascript or JQuery
body: <p>I want to dynamically adjust the position of a YouTube video element using javascript based on the browser dimensions. I am not looking for a purely CSS Solution, I know that I can do that with padding, I am looking for a javascript solution which alters CSS of the div.
  In this instance my DIV is "wrappervideo"</p>
  
  <pre><code>&lt;script&gt;
  var viewWidth = window.innerWidth;
  var viewHeight = window.innerHeight;
  var narrowPadding = (((viewWidth/1.7777)-(viewHeight/1.5))/2);
  var tallHeight = (viewHeight/1.5);
  var tallWidth = (viewHeight/1.5)*1.7777;
  var tallPadding = ((viewWidth)-(viewHeight/1.5)1.7777)/2;
  
  function findAspectRatio() {
       if ( viewWidth/(viewHeight/1.5) &gt;= 1.777) {
        setTimeout(narrow,0)}
       if ( viewWidth/(viewHeight/1.5) &lt;= 1.777) {
        setTimeout(tall,0)}
       if ( viewWidth/(viewHeight/1.5) == 1.777) {
        setTimeout(equal,0)}
        }
  
  function equal() {
      wrappervideo.style.top = '0px';
      wrappervideo.style.width = '100%'; }
  function narrow() {
      wrappervideo.style.top = narrowPadding;
      wrappervideo.style.width = '100%'; }
  function tall() { 
      wrappervideo.style.right = tallPadding;
      wrappervideo.style.width = tallWidth; }
  
   &lt;/script&gt;
  </code></pre>
  
  <p>Edited - This is what I have currently. Any thoughts on why this isn't working?</p>