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 image is full with, fixed height and responsive. The Vimeo 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 vimeo player requires the video ID and the Intrinsic Ratio to be inserted in the widget settings.
The ratio is calculate from the video file height divided by its width and multiplied by one hundred …
Width ÷ Height × 100 = Intrinsic Aspect Ratio (IAR)
Examples: 16:9 = 56.25, 4:3 = 75
The Vimeo video player has options for show/hide the title and byline and to implement autoplay and loop if required.