Centered responsive video inside a container with fixed height

0
votes

I have to embed a video inside container 100% x 400px

Is there any way to do that through video.js? The problem is video has to be centered vertically and unneccessary top/bottom parts should be cropped by container div.

Also I'd like to remove black video areas when we resizing browser window. I mean, video should be stretched by 100% width.

Actuall the question is: Is it possible?

Code example here (it's pretty simple): http://jsfiddle.net/fNADc/1/

<div class="holder">
    <video id="example_video_1" class="video-js vjs-default-skin" width="100%" height="400" poster="http://video-js.zencoder.com/oceans-clip.jpg" data-setup="{}" controls>
          <source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
    </video>
</div>
1
javascriptcssvideo.js
You spent hours on investigation and probably 30 seconds on writing the question. Please post code and if possible a Fiddle - Andrea Ligios

1 Answers

0
votes

You can add negative margins to your VIDEO tag

Fiddled here

CSS :

#example_video_1 {margin:-122px}