窗口大小调整功能不适用于Flash

Question

我正在使用每个人的视频代码片段将视频嵌入到我的网站中。 该代码段基本上可以保证或多或少地使用户能够从任何设备上观看视频。 这是我的html：

<div class="intermitent-video-container">
    <video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
        <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="100%" height="100%"> 
            <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
            <param name="allowFullScreen" value="true" />
            <param name="wmode" value="transparent" />
            <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" />
            <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
        </object>
    </video>
</div>

要控制此视频的尺寸和长宽比以进行响应式布局，我使用以下Javascript：

function resizeVideo() {
  var videoWidth = jQuery(".intermitent-video-container").width();
  var videoHeight = videoWidth * 0.666;
  jQuery(".intermitent-video-container").css('height',videoHeight);
};

resizeVideo();
jQuery(window).resize(resizeVideo);

上面的代码段完全按照我的要求运行，但当视频后备时间变为视频的Flash版本时。 当我在使用Flash的Safari 5.1.7加载页面时，例如，视频将使用上面加载时的代码段（而不是窗口调整大小）完全按照我想要的大小进行调整。 这是对Flash的限制，还是我做错了什么？

Answer 1

为视频标签添加CSS

video{
    width: 100%;
    height: auto;
}

而且您绝对可以确保间歇性视频容器具有响应能力。 注意：不要忘记头部HTML中的<meta name="viewport" content="width=device-width, initial-scale=1">