Add these CSS rules to your body (the video’s parent container):
text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden; /* hide the cropped portion */
Add these CSS rules to your video:
display: inline-block;
position: relative; /* allows repositioning */
left: 100%; /* move the whole width of the image to the right */
margin-left: -200%; /* magic! */
Most of this was pulled directly from Bryce Hanscomb’s answer to another similar question: How to center crop an image (<img>) in fluid width container
Here’s a jsfiddle just in case:
http://jsfiddle.net/pLj0gcpu/
(Note that the markup and styles in this fiddle were pulled from your given URL)
1
solved Responsive Background Video