0

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 (see screenshot below) using anything necesary.

Screenshot of desired effect

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

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

quw
  • 2,844
  • 1
  • 26
  • 35
Luis Gallego
  • 43
  • 1
  • 12
  • "`This is my first question here so if you need anything I'll be glad to answer. Thanks.`" No it's not you have asked already the same question. Go edit your old one. – Roko C. Buljan Nov 12 '14 at 19:51

2 Answers2

1

Adding a style to the video tag should do that

    <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>
Raziza O
  • 1,560
  • 1
  • 17
  • 37
0

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?

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:

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.

lsubi
  • 116
  • 6