Question

我正在尝试调整视频大小，以便在浏览器宽度低于960像素时仅填充其容器的100％。由于与内联样式有关的原因，我在jquery中编写了这个简单的函数。如果工作正常 - 但只在窗口加载时调用它。

$(document).ready(function(){
    if ($(window).width() < 950) {
        $("video").width("100%");
    }
});

如何编写类似的jquery函数，可以在调整浏览器窗口大小时动态更改视频的宽度？我尝试过以下但无济于事。

$(window).resize(function() {
if ( $(window).width() < 950) {
    $("video").width("100%");
}
});

* 编辑 *以下是新的视频HTML代码：

<div id="sliderbg">
   <div class="container">
      <div id="slider" class="row">
      <div class="eight columns">   
    <div id="text-6" class="widget widget_text">            <div class="textwidget"><br>
<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"  >
    <source src="http://first1444.com/wp-content/themes/lightningyellow/videos/robotintro.mp4" type="video/mp4" />      
    <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">
        <param name="movie" value="http://www.first1444.com/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf" />
        <param name="flashvars" value="controls=true&amp;file=http://first1444.com/wp-content/themes/lightningyellow/videos/robotintro.mp4" />          
    </object>       
</video>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#wp_mep_1').mediaelementplayer({
    m:1

    ,features: ['playpause','current','progress','volume','tracks']

});
});
</script>

<br/><h6 id="tagline">See <b><i>FIRST</i></b> Team #1444 in action building this years robot</h6>
</div>
</div><script type="text/javascript">
$(document).ready(function() {
if ( $(window).width() < 960) {
    $("video").width("100%");
}
});
</script>

</div><!-- eight columns -->

顺便说一句，我正在使用基础css框架。我怀疑这会导致问题。

Answer 1

您还可以使用CSS媒体查询：

#my-element {
    width : 950px;
}

@media all and (max-width: 950px) {
    #my-element {
        width : 100%;
    }
}

这将元素设置为950px宽，除非视口小于950px，在这种情况下，元素设置为100%宽度。

以下是使用媒体查询的演示：http://jsfiddle.net/G9gx6/

以下是查找哪些浏览器支持内容的良好来源：http://caniuse.com/#feat=css-mediaqueries

更新

当然，您也可以使用JavaScript：

//bind to the windows resize event
$(window).on('resize', function () {

    //check if the viewport width is less than 950px
    if ($(this).width() < 950) {

        //if so then set some element's width to 100%
        $('#my-element').width('100%');
    } else {

        //otherwise set the element's width to 950px
        $('#my-element').width('950px');
    }

//trigger a resize event on the window object so this code runs on page-load
}).trigger('resize');

更新

要优化此代码，我会缓存$('#my-element')选择，并限制resize事件处理程序只运行一次：

$(function () {
    var $element = $('#my-element'),
        resizeOK = true,
        timer    = setInterval(function () {
            resizeOK = true;
        }, 100);
    $(window).on('resize', function () {
        if (resizeOK) {
            resizeOK = false;
            if ($(this).width() < 950) {
                $element.width('100%');
            } else {
                $element.width('950px');
            }
        }
    }).trigger('resize');
});

以下是演示：http://jsfiddle.net/G9gx6/1/

Answer 2

你只是有一个错字。它应该是：

$(window).resize(function() {

resize（）文档：http://api.jquery.com/resize/

Answer 3

您要做的是将您的功能包装在：

$(window).resize(function(){
    alert('You resized the window!');
});

参考：.resize()

当浏览器宽度低于950px时如何动态调用jquery函数？

3 个答案:

更新

更新