html – 视频100%的宽度和高度

我有一个视频,我想要它填充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;
 }
您可以使用Javascript将高度动态设置为窗口的100%,然后根据视频宽度与窗口宽度的比例,使用负左边距居中.

http://jsfiddle.net/RfV5C/

var $video  = $('video'),
    $window = $(window); 

$(window).resize(function(){
    var height = $window.height();
    $video.css('height', height);

    var videoWidth = $video.width(),
        windowWidth = $window.width(),
    marginLeftAdjust =   (windowWidth - videoWidth) / 2;

    $video.css({
        'height': height, 
        'marginLeft' : marginLeftAdjust
    });
}).resize();
相关文章
相关标签/搜索