小编Mil*_*lan的帖子

我有一个视频,我想要它填充100%的宽度和100%的高度.并保持纵横比.

是否有可能它至少填充100%？如果视频的某些部分必须在屏幕之外以保持宽高比,那无关紧要.

HTML:

    <video preload="auto" class="videot" id="videot" height="100%" preload>
    <source src="BESTANDEN/video/tible.mp4" type="video/mp4" >
    <object data="BESTANDEN/video/tible.mp4" height="1080">
        <param name="wmode" value="transparent">
        <param name="autoplay" value="false" >
        <param name="loop" value="false" >
    </object>

CSS:

 .videof, .videot {
    width: 100%    !important;
    height: 100%   !important;
 }

我在做什么:

我正在一个有两个不同"侧面"的网站上工作,当你点击左侧时,左侧需要100%.如果单击右侧,则右侧必须为100%.

完成了:

我做了左右两边.并用Jquery制作动画.

问题
单击左侧div时动画正在工作(仅当我添加绝对位置时才有效),但是当我尝试为右侧创建相同的动画时; 它不工作!我创建了一个jsFiddle,所以你可以看到当前的代码:http://jsfiddle.net/sh3Rg/

我无法做出正确的工作.当你点击右边的div; 它需要动画到100%.就像左边一个.

码

您可以在此处查看实时预览和代码:http://jsfiddle.net/sh3Rg/

HTML:

<div id="left"></div>
<div id="right"></div>

JS:

<script>
$('#left').click(function(){
    $('#left').animate({width:'100%'}, 2500);
});
</script>
<script>
$('#right').click(function(){
    $('#right').animate({width:'100%'}, 2500);
});
</script>

CSS:

html,body {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
    background-color: #000000;
}
p { 
    cursor: pointer;
    color: #FFF;
}
#left {
    width: 50%;
    height: 100%;
    background: #666;
    float: left;
    cursor: pointer;
    position: absolute;
}
#right {
    width: 50%;
    height: 100%;
    background: #063;
    float: right;
    cursor: pointer;    
} …