title: IE8 Video.js Aspect Ratio / Sizing Problems
body: <p>I am frustrated to the bitter end on this project I'm working on lol. I am using Video.js to create the site which will be a site where users upload videos for contests.</p>
  
  <p>I am using twitter bootstrap and I've created a responsive design from a PSD and it looks awesome in all real browsers (ff, safari, chrome, etc.). It even looks pretty decent in IE7, IE9 and IE10. BUT, for some reason it just completely breaks in IE8.</p>
  
  <p>I am using a jquery script to force 16x9 aspect ratio, and this is where the problem lies. IE8 just totally ignores it and the html5 video element doesn't have a width or height on it, so it completely freaks out the browser.</p>
  
  <p>Any ideas? Ultimately I'm trying to just have responsive width and 16x9 height ratio. The script i'm using works beautifully for it, but I HAVE to be able to support IE8. Don't care about 7.</p>
  
  <p>Here's a live preview of the site, it's using the codeigniter framework, not that that matters...</p>
  
  <p><a href="http://422clients.com/renditionbattle" rel="nofollow">Live preview of the site</a></p>
  
  <p>Here's my page code...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Cover Song Contests | Rendition Battle&lt;/title&gt;
  &lt;meta name="description" content="RenditionBattle.com offers cash prizes for cover song contests."&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
  &lt;!-- Bootstrap --&gt;
  &lt;link href="http://localhost:8888/renditionbattle/css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
  &lt;link href="http://localhost:8888/renditionbattle/css/main.css" rel="stylesheet" media="screen"&gt;
  &lt;link href="http://localhost:8888/renditionbattle/css/responsive.css" rel="stylesheet" media="screen"&gt;
  
  &lt;!-- Video.js in head for older IE --&gt;
  &lt;link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"&gt;
  &lt;script src="http://vjs.zencdn.net/c/video.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;!-- Sticky Footer Wrapper --&gt;
      &lt;div class="heightWrapper"&gt;
  
          &lt;!-- Login Header --&gt;
          &lt;div class="loginHeader"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="pull-right register"&gt;
                      &lt;a href="#" class="btn btn-small btn-inverse"&gt;Signup&lt;/a&gt; &lt;a href="#"&gt;Sign Up&lt;/a&gt; | &lt;a href="#"&gt;Register&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- End Login Header --&gt;
  
          &lt;!-- Logo and Navigation --&gt;
          &lt;div class="container header"&gt;
              &lt;div class="logo pull-left"&gt;&lt;a href="#"&gt;&lt;img src="http://localhost:8888/renditionbattle/img/logo.png" alt="Rendition Battle" /&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;ul class="mainnav pull-right"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Latest Battle&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Vote Now&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Request a Contest&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;FAQ's&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="btn-group mobilenav"&gt;
                  &lt;a class="btn dropdown-toggle btn-inverse" data-toggle="dropdown" href="#"&gt;Menu &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Latest Battle&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Vote Now&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Request a Contest&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;FAQ's&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="stripes"&gt;&lt;/div&gt;
          &lt;!-- End Logo and Navigation --&gt;        
          &lt;!-- Battle Leader Section --&gt;
          &lt;div class="background"&gt;
              &lt;div class="container"&gt;
                  &lt;p class="tagline"&gt;sign up. upload your rendition of the contest's song. win money.&lt;/p&gt;
                  &lt;div class="battleLeader"&gt;
                      &lt;div id="battleVideo"&gt;
                          &lt;div class="battleTag"&gt;&lt;/div&gt;
                          &lt;video id="battle" class="video-js vjs-default-skin" width="500" height="300" controls preload="auto" poster="my_video_poster.png" data-setup='{"techOrder": ["html5", "flash"]}'&gt;
                            &lt;source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'&gt;
                            &lt;source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'&gt;
                          &lt;/video&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- End Battle Leader Section --&gt;
  
          &lt;!-- Upload Now --&gt;
          &lt;div class="uploadNow"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="span9 acEntries"&gt;
                          &lt;h4&gt;CURRENT CONTEST ACCEPTING ENTRIES UNTIL MARCH 30, 2013&lt;/h4&gt;
                          &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="span3"&gt;&lt;a href="#" class="btn btn-block btn-large btn-info"&gt;Upload Now &lt;i class="icon-share-alt icon-white"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- End Upload Now --&gt;
  
          &lt;!-- Featured Member and Comments--&gt;
          &lt;div class="featuredMember"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
  
                      &lt;!-- Latest Comments --&gt;
                      &lt;div class="span6 latestComments"&gt;
                          &lt;div class="comment"&gt;
                              &lt;div class="lcContent"&gt;
                                  &lt;div class="lcAvatar"&gt;&lt;img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder" /&gt;&lt;/div&gt;
                                  &lt;div class="lcDate"&gt;Jan 7th, 2013&lt;/div&gt;
                                  &lt;div class="lcComment"&gt;
                                      &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry&lt;/p&gt;
                                  &lt;/div&gt;
                                  &lt;div class="lcMore"&gt;
                                      &lt;a href="#" class="btn btn-small"&gt;View Profile&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="comment"&gt;
                              &lt;div class="lcContent"&gt;
                                  &lt;div class="lcAvatar"&gt;&lt;img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder" /&gt;&lt;/div&gt;
                                  &lt;div class="lcDate"&gt;Jan 7th, 2013&lt;/div&gt;
                                  &lt;div class="lcComment"&gt;
                                      &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry&lt;/p&gt;
                                  &lt;/div&gt;
                                  &lt;div class="lcMore"&gt;
                                      &lt;a href="#" class="btn btn-small"&gt;View Profile&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="comment"&gt;
                              &lt;div class="lcContent"&gt;
                                  &lt;div class="lcAvatar"&gt;&lt;img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder" /&gt;&lt;/div&gt;
                                  &lt;div class="lcDate"&gt;Jan 7th, 2013&lt;/div&gt;
                                  &lt;div class="lcComment"&gt;
                                      &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry&lt;/p&gt;
                                  &lt;/div&gt;
                                  &lt;div class="lcMore"&gt;
                                      &lt;a href="#" class="btn btn-small"&gt;View Profile&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;!-- Latest Member --&gt;
                      &lt;div class="span6 latestMember"&gt;
                          &lt;h3&gt;Current Contest Leader&lt;/h3&gt;
                          &lt;p class="lmp"&gt;ShockForce75's rendition of Carly Rae Jaspen's: Call Me Maybe&lt;/p&gt;
                          &lt;div class="latestvid"&gt;
                              &lt;video id="lvid" class="video-js vjs-default-skin" controls preload="auto" poster="my_video_poster.png" data-setup='{"techOrder": ["html5", "flash"]}'&gt;
                                &lt;source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'&gt;
                                &lt;source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'&gt;
                              &lt;/video&gt;
                          &lt;/div&gt;
                          &lt;div class="lvidComment"&gt;
                              &lt;div class="lvidCommentTail"&gt;&lt;img src="http://localhost:8888/renditionbattle/img/lc.png" alt="latest comment" /&gt;&lt;/div&gt;
                              &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing.&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- End Featured Member --&gt;
  
          &lt;!-- Previous Members --&gt;
          &lt;div class="pwHeader"&gt;
              &lt;div class="container"&gt;
                  &lt;h4&gt;Previous Winners&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="pw"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="span2 pwMember"&gt;&lt;img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /&gt;&lt;/div&gt;
                      &lt;div class="span2 pwMember"&gt;&lt;img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /&gt;&lt;/div&gt;
                      &lt;div class="span2 pwMember"&gt;&lt;img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /&gt;&lt;/div&gt;
                      &lt;div class="span2 pwMember"&gt;&lt;img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /&gt;&lt;/div&gt;
                      &lt;div class="span2 pwMember"&gt;&lt;img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /&gt;&lt;/div&gt;
                      &lt;div class="span2 pwMember"&gt;&lt;img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- End Previous Members --&gt;       &lt;div class="push"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- End Sticky Footer Wrapper --&gt;
  
      &lt;!-- Footer --&gt;
      &lt;div class="footer"&gt;
          &lt;div class="container"&gt;
              &lt;div class="pull-left"&gt;
                  &lt;p&gt;Copright &amp;copy; 2013 RenditionBattle.com. All Rights Reserved.&lt;br /&gt;
                  &lt;a href="http://422studios.com" target="_blank"&gt;Dallas Web Development&lt;/a&gt; by 422 Studios, LLC&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="pull-right"&gt;
                  &lt;a href="#"&gt;&lt;img src="http://localhost:8888/renditionbattle/img/icon-twitter.png" alt="twitter" /&gt;&lt;/a&gt; 
                  &lt;a href="#"&gt;&lt;img src="http://localhost:8888/renditionbattle/img/icon-fb.png" alt="facebook" /&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="clearfix"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- End Footer --&gt;
  
      &lt;!-- JS --&gt;
      &lt;input type="hidden" id="siteUrl" value="http://localhost:8888/" /&gt;
      &lt;input type="hidden" id="baseUrl" value="http://localhost:8888/" /&gt;
      &lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost:8888/renditionbattle/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost:8888/renditionbattle/js/respond.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost:8888/renditionbattle/js/main.js"&gt;&lt;/script&gt;
      &lt;script src="http://localhost:8888/renditionbattle/js/aspectratio.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my JS for the aspect ratio...</p>
  
  <pre><code>//Battle video aspect ratio
  // Once the video is ready
  $(document).ready(function() {
        _V_("battle").ready(function(){
  
          var myPlayer = this;    // Store the video object
          var aspectRatio = 9/16; // Make up an aspect ratio
  
          function resizeVideoJS(){
            // Get the parent element's actual width
            var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
            // Set width to fill parent element, Set height
            myPlayer.width(width).height( width * aspectRatio );
          }
  
          resizeVideoJS(); // Initialize the function
          window.onresize = resizeVideoJS; // Call the function on resize
      });
  
      //Latest video aspect ratio
      // Once the video is ready
        _V_("lvid").ready(function(){
  
          var myPlayer = this;    // Store the video object
          var aspectRatio = 9/16; // Make up an aspect ratio
  
          function resizeVideoJS(){
            // Get the parent element's actual width
            var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
            // Set width to fill parent element, Set height
            myPlayer.width(width).height( width * aspectRatio );
          }
  
          resizeVideoJS(); // Initialize the function
          window.onresize = resizeVideoJS; // Call the function on resize
      });
  });
  </code></pre>
  
  <p>Any ideas on how I can modify my code to work? If someone knows of something that I could use to accomplish my utlimate goal I am open to switching solutions entirely if need be.</p>
  
  <p>Also, I DID try everything I can find and think of to redirect to <a href="http://www.422clients.com/page/upgrade" rel="nofollow">http://www.422clients.com/page/upgrade</a> if they were IE8 but it just loads forever and ultimately gives me a weird connection error page on ie8.</p>