Animated Hero Vimeo Video Banner

This widget is designed to allow an HD video to be displayed at its full width (1280)px when viewed on computers and respond to the reduction in viewport width when the page is viewed on a tablet device.
If viewing this page on a computer or laptop, increase the browser width to at least 1280px and then reduce it to the width of an iPad in portrait mode to see the effect.
A hero banner image or a colored background is inserted and the video and its caption are inserted so that they are centered both horizontally and vertically inside it. This allows the video to expand and contract with browser/device width and still remain within the banner.
The hero banner is full with, fixed height and responsive. The MP4 video player and the optional title can animate in if required. The animation direction, duration and delay are variable for both the video player and the title.
The animations are InDown, InUp, InLeft, In Right and none.

Video

The video player is implemented using VideoJS with modifications to allow a responsive design, to enable setting an initial volume and to remove the fullscreen option which is not applicable in this situation.
The video can autoplay and/or loop if required and there are controls to implement "muted" and "playsinline". The last option can be used to allow inline play on iOS devices.