在视频中包含div

Question

我有一个宽度为100％且高度为100％的HTML5视频，我想要包装一个div以适应视频的大小和位置（不是视频标签，而是视频本身（见下面的截图）使用任何必要的东西。

[See Fiddle]

HTML：

<div id="wrapper"></div>
<video id="vid" controls preload="none" width="100%" height="100%" poster="http://video-js.zencoder.com/oceans-clip.png">
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'/>
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'/>
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'/>
</video>

CSS：

#wrapper{
  width: 2px;
  height: 2px;
  border: solid 2px red;
  position: absolute;
}

JS（jQuery）：

setInterval(function(){
    $("#vid").height($(window).height() - $("header").height() - 7);
    /*There is a header and a bunch of other stuff in the original code*/
}, 10);

这是我在这里的第一个问题，所以如果你需要什么我很乐意回答。感谢。

Answer 1

为视频标记添加样式应该

＆＃13;

＆＃13;

    <video id="vid" controls preload="none" width="100%" height="100%" poster="http://video-js.zencoder.com/oceans-clip.png" style="border:solid 2px red">
        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'/>
        <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'/>
        <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'/>
    </video>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用视频的宽高比计算视频的高度和宽度似乎是必要的。你的小提琴在视频元素上设置了一个高度（设置为264），这与你的问题的代码示例不同。哪个更适合您的问题？

话虽如此，也许这样的事情可能会尝试计算包装器的正确高度和顶部css值，假设视频宽度为横向（全窗宽）：

JAVASCRIPT：

var vidRatio = $("#vid").height()/$("#vid").width();

setInterval(function(){
    $("#vid").height($(window).height() - $("header").height() - 7);
    var width = $(window).width()-20; // abitrary 20 pixels to account for border/margin/padding?
    $("#wrapper").css({
        'width': width, 
        'height':width*vidRatio,
        'top':($(window).height()-width*vidRatio)/2
    });
/*There is a header and a bunch of other stuff in the original code*/
}, 10);

CSS：

#wrapper
{
    width: 2px;
    height: 2px;
    border: solid 2px red;
    position:absolute;
}

http://jsfiddle.net/lsubirana/1Ly0f5cx/

这不完美但可能会有所帮助。