Self Hosted MP4 Video

A video player for a responsive website needs a poster image to show on load and the video file inserted in two sizes for computers and small mobile devices.
The video should be prevented from downloading at page and until the visitor decides to play it. Video players must have a lazy loading function for best performance on mobile devices.

Video Panel

The video stage is centered horizontally and verticallyin the slide out overlay and has a maximum setting. The stage has controls to add a border and/or a bottom box shadow.
The video plays when the panel loads. It will pause when the overlay is hidden using the close tab or on click/tap anywhere outside the video stage.

Hosted Video

Hosted video like, Vimeo, Wistia and YouTube are not the best and most efficient way to insert a movie in a responsive web page. They have a large bunch of supporting files which download whether the video is played a lot so adding a lazy loading function is essential for good performance.
If hosted video must be used it is better to take it offscreen at page load and display it in a slide panel or moodal.