Css 使用MediaElement瞄准小型设备

我在玩mediaelement.js

到目前为止很好

我只是面临一个小问题，当我瞄准小型设备时，视频不会自动调整到新设备的大小

我怀疑#containingBlock有问题，所以我尝试使用媒体查询来定位它

我尝试了Chris Coyer的建议，以获得响应视频 但它破坏了mediaelement.js输出的内容

也许有人对我如何发行iphone有想法

我的网页位于

我使用以下html来嵌入我的视频

<div id="containingBlock">
        <video id="introVid" poster="http://med-innovation.com/wp-content/themes/med/images/video_start.png" controls="control" preload="none">     
            <source src="http://med-innovation.com/wp-content/themes/med/media/ElevatorPitch.mp4" type="video/mp4" />
            <source src="http://med-innovation.com/wp-content/themes/med/media/ElevatorPitch.webm" type="video/webm" />
            <source src="http://med-innovation.com/wp-content/themes/med/media/ElevatorPitch.ogv" type="video/ogg" />
            <object type="application/x-shockwave-flash" data="http://med-innovation.com/wp-content/themes/med/build/flashmediaelement.swf">
                <param name="movie" value="http://med-innovation.com/wp-content/themes/med/build/flashmediaelement.swf" />
                <param name="flashvars" value="controls=true&amp;file=http://med-innovation.com/wp-content/themes/med/media/ElevatorPitch.mp4" />
                <img src="http://med-innovation.com/wp-content/themes/med/images/fail.jpg" width="640" height="360" title="Il n'est pas possible de visionner une video avec votre navigateur" />
            </object>
        </video>    
        <script>
        jQuery(document).ready(function($) 
        {
            // declare object for video
            var player = new MediaElementPlayer('#introVid', 
            {
             // if the <video width> is not specified, this is the default
                defaultVideoWidth: 640,
                // if the <video height> is not specified, this is the default
                defaultVideoHeight: 360,
                // if set, overrides <video width>
                videoWidth: -1,
                // if set, overrides <video height>
                videoHeight: -1,
                // enables Flash and Silverlight to resize to content size
                enableAutosize: true,
                // the order of controls you want on the control bar (and other plugins below)
                features: ['playpause','loop','current','progress','duration','volume'],
                success: function (mediaElement, domObject) 
                { 
                    // add event listener
                    mediaElement.addEventListener('ended', function(e) 
                    {
                           window.location = "http://med-innovation.com/choice/";
                    }, false);
                }
            });
        });

        </script>

---

我知道你提到了Chris Coyier和那个教程，但是请查看这个由同一个人专门为视频响应设计的插件

---

祝你好运

我知道你提到了Chris Coyier和那本教程，但是请查看这个插件，它是由同一个人专门为视频响应而设计的

---

祝你好运

谢谢，我有什么想法吗？问题可能是这项工作，并在问题中添加html5、css等标记。请做一把小提琴，这样我们就可以调试问题了：）谢谢，我有什么想法吗？问题可能是这项工作，并在问题中添加html5、css等标记。请做一把小提琴，这样我们就可以调试问题了：）

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

#containingBlock {
width: 640px;
height: 360px;
margin: 0 auto;
text-align:center;
}

@media(max-width: 520px)
{
#page-wrap, #colophon {width: auto; margin: 7px auto; }
#containingBlock {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align:center;
    }
}