title: How to dynamically call jquery function when browser width goes below 950px?
body: <p>I am trying to resize a video so that if fills 100% of its container ONLY when the browser width drops below 960 pixels. For reasons pertaining to inline styles I wrote this simple function in jquery. If works fine--but it is only called when the window is loaded. </p>
  
  <pre><code>$(document).ready(function(){
      if ($(window).width() &lt; 950) {
          $("video").width("100%");
      }
  });
  </code></pre>
  
  <p>How would I write a similar jquery function which can change the width of the video dynamically as the browser window is resized? I have tried the following but to no avail.</p>
  
  <pre><code>$(window).resize(function() {
  if ( $(window).width() &lt; 950) {
      $("video").width("100%");
  }
  });
  </code></pre>
  
  <p>*<em>EDIT</em>*Here is the new video html code:</p>
  
  <pre><code>&lt;div id="sliderbg"&gt;
     &lt;div class="container"&gt;
        &lt;div id="slider" class="row"&gt;
        &lt;div class="eight columns"&gt;   
      &lt;div id="text-6" class="widget widget_text"&gt;            &lt;div class="textwidget"&gt;&lt;br&gt;
  &lt;video id="wp_mep_1"   width="600" height="330" poster="http://www.first1444.com/wp-content/themes/lightningyellow/images/poster.png" controls="controls" preload="none"  &gt;
      &lt;source src="http://first1444.com/wp-content/themes/lightningyellow/videos/robotintro.mp4" type="video/mp4" /&gt;      
      &lt;object width="600" height="330" type="application/x-shockwave-flash" data="http://www.first1444.com/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf"&gt;
          &lt;param name="movie" value="http://www.first1444.com/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf" /&gt;
          &lt;param name="flashvars" value="controls=true&amp;amp;file=http://first1444.com/wp-content/themes/lightningyellow/videos/robotintro.mp4" /&gt;          
      &lt;/object&gt;       
  &lt;/video&gt;
  &lt;script type="text/javascript"&gt;
  jQuery(document).ready(function($) {
  $('#wp_mep_1').mediaelementplayer({
      m:1
  
      ,features: ['playpause','current','progress','volume','tracks']
  
  });
  });
  &lt;/script&gt;
  
  &lt;br/&gt;&lt;h6 id="tagline"&gt;See &lt;b&gt;&lt;i&gt;FIRST&lt;/i&gt;&lt;/b&gt; Team #1444 in action building this years robot&lt;/h6&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  if ( $(window).width() &lt; 960) {
      $("video").width("100%");
  }
  });
  &lt;/script&gt;
  
  &lt;/div&gt;&lt;!-- eight columns --&gt;
  </code></pre>
  
  <p>By the way I am using the foundation css framework. I doubt that would be causing the problem.</p>