How to dynamically call jquery function when browser width goes below 950px?
<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>
