title: if elements height is greater than x addClass "portrait" else addClass "landscape"
body: <p>I am trying to write this script:</p>
  
  <p>if elements height is greater than 226, addClass "portrait", else addClass "landscape"</p>
  
  <p>I have this:</p>
  
  <pre><code>var assetHeight = $("video.img-responsive").outerHeight();
  
  if (assetHeight &gt; 226){
      $("video.img-responsive").addClass('portrait');
  }
  else {
      $("video.img-responsive").addClass('landscape');
  }
  </code></pre>
  
  <p>However, When I inspect my elements all of them only have the added class 'landscape' even though some elements have a height greater than 226.</p>
  
  <p>Additionally, When I flip the script to :</p>
  
  <pre><code>var assetHeight = $("video.img-responsive").outerHeight();
  
  if (assetHeight &lt; 226){
      $("video.img-responsive").addClass('landscape');
  }
  else {
      $("video.img-responsive").addClass('portrait');
  }
  </code></pre>
  
  <p>All the elements are still adding the class landscape.</p>
  
  <p>When I use my console to check my selectors, and find the hight of each individual elements it gives me the proper heights of the elements. However, the height is not indicated in css, or html. giving the elements a default height of auto.</p>
  
  <p>here is my html :</p>
  
  <pre><code>&lt;div id="mTS_1" class="mTSWrapper mTS_horizontal"&gt;
  
  &lt;ul id="mTS_1_container" class="mTSContainer" 
  style="position: relative; top: 0px; left: 0px; width: 815px;"&gt;
  
      &lt;li class="mTSThumbContainer"&gt;
          &lt;div class="asset-container"&gt;
              &lt;video class="img-responsive landscape" type="video/mp4"        
              src="https://ternpro-development.s3.amazonaws.com/media/
              films/69/mobile/2.mp4" data-id="69"&gt;&lt;/video&gt;
         &lt;/div&gt;
         &lt;span class="thumnail-video"&gt;&lt;/span&gt;
     &lt;/li&gt;
  
     &lt;li class="mTSThumbContainer"&gt;
         &lt;div class="asset-container"&gt;
             &lt;video class="img-responsive landscape" type="video/mp4" 
             src="https://ternpro-development.s3.amazonaws.com
             /media/films/71/mobile/3.mp4" data-id="71"&gt;&lt;/video&gt;
         &lt;/div&gt;
         &lt;span class="thumnail-video"&gt;&lt;/span&gt;
     &lt;/li&gt;
  
  &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Console:</p>
  
  <pre><code>$("[data-id='72']").outerHeight();
  224
  
  $("[data-id='73']").outerHeight();
  710
  </code></pre>