Viewport Size MP4 Video

The video stage has 100% width and the height is set to 100vh to fill the browser or device window. The video and its poster image are made to fill this container using the CSS object-fit property.
The result would be pretty much useless to those with small laptops or touch devices like the iPad and Phone. For these devices the video is made fully responisve.
The break point at which this change happens is set to 1059px by default so that the mode is switched for iPads in landscape mode. Setting it a bit wider will give a better viewing experience for those using small laptops.
If viewing this page on a computer, increase the browser to full width and then reduce it to the width of a phone to see the changes.
Controls
There are checkboxes for turning on/off the video control bar, plays inline, muted, autoplay and loop.
Plays inline is used to give a better viewing experience on iPhones. Controls should be turned on unless autoplay is selected.
Autoplay
Video will NOT autoplay in Safari unless the video soundtrack is muted using the control provide. Autoplay should be avoided for items like video and slideshows on responsive pages. Using autoplay is really irritating and distracting for those who want to focus on other info in the page content and is a major source of battery drain on mobile devices.
Overlay
There is an optional h1 heading and text block for info which shows on hover and only when the page is viewed on a computer.
The heading is centered at the bottom with a control to adjust its height. There is a checkbox to display it when viewed on touch devices if required where it positions itself below the video.
The text block has controls for positioning it in relation to the left or right and top or bottom.