1

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.

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

EDIT: What I need is something like this

Seth
  • 6,514
  • 5
  • 49
  • 58
Luis Gallego
  • 43
  • 1
  • 12

2 Answers2

2

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
  • Hey, Isubi! Thanks. The height in the fiddle is updated via JS, so, the default height doesn't really matters. Even though this is basically what I need there's still one little problem I though you could help me with: I need the wrapper to keep wrapping when the height of the window is smaller, with your code, this [link](http://i.gyazo.com/9a86386c4b43322083d2393d76b98297.png) happens... I though you knew how to solve it, if you can I'll obviously give you the best answer – Luis Gallego Nov 13 '14 at 02:12
  • 1
    You'll need to test for when the window's aspect ratio doesn't allow for the video to fit height-wise. Then change the height, width and left css properties of the wrapper appropriately. – lsubi Nov 13 '14 at 19:56
0

plz try this

#wrapper
{
    width:`100%;
    height:100%;
    display:block;
    border: solid 2px red;
}
#wrapper #vid{ display:inline-block}
<div id="wrapper">
<video id="vid" controls preload="none" width="100%" height="264"
      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>
    </div>
jithender
  • 50
  • 2
  • Hey, Jithender! Thanks for answering but, keeping in mind that I got the same answer again, It's because I made the wrong question. I've edited the question. Hope you can help me. Thanks – Luis Gallego Nov 11 '14 at 06:26