Оберните div над видео

Question

У меня есть видео HTML5 с шириной 100%, а также высота 100%, и я хочу обернуть div, чтобы он соответствовал размеру и положению видео (не тег видео, но само видео (см скриншот ниже), используя что-нибудь necesary

[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

Расчет высоты и ширины видео, используя соотношение сторон видео представляется необходимым. Ваша скрипка устанавливает высоту на видеоэлементе (установлена ​​на 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/

Это не идеально, но может помочь.

Answer 2

Добавление стиля к видео тег должен сделать

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