制作div的大小和位置与视频的相同 [英] Make a div's size and position the same as a video's

问题描述

我有一个宽度为100％，高度为100％的HTML5视频，我想包装一个div以适应视频的大小和位置（而不是视频标记，但视频本身）任何必需的。

I have an HTML5 video with a width of 100% and also a height of 100% , and I want to wrap a div to fit the size and position of the video (not the video tag, but the video itself) using anything necesary.

[见小提琴]

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）：

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);

这是我的第一个问题，所以如果你需要什么，我会很高兴回答。非常感谢。

This is my first question here so if you need anything I'll be glad to answer. Thanks.

编辑：我需要的是类似此

What I need is something like this

推荐答案

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

Calculation of the height and width of the video using the video's aspect ratio seems necessary. Your fiddle puts a height on the video element (set to 264), which is not the same as your question's code sample. Which is more appropriate to your question?

话虽如此，也许这样的东西可以尝试计算适当的高度和包装器的顶部css值，假设视频宽度将为横向（全窗口宽度）：

That being said, perhaps something like this can attempt to calculate the proper height and the top css value of the wrapper, assuming the video width will be landscape (full window width):

JAVASCRIPT：

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/

这不是完美的，但可能会有帮助。

It's not perfect but may help.

这篇关于制作div的大小和位置与视频的相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！