ThemeKit Classy Widgets

ThemeKit Stage Video

Responsive Website Video

Playing video on a responsive site is tricly because the file needs to be prevented from downloading on page load, a poster image is required and the visitor should be given the choice of an SD and an HD video file.
Autoplay
I think most web designers are now familiar with the fact that video will NOY autoplay on Safari for desktop and mobile unless there is no soundtrack or the sound is muted.
Background
Playing a video in the browser background is a complete disaster for visitors using mobile phones since they need to download a very big video fil ewhether they want to watch it or not.

Responsible Video

A responsible web design will load a poster image at page load and provide a play/pause function and use the option to replace the video with a small 9:16 aspect ratio on phones.
Background Video
Playing video in the browser background is not a good idea since it stretches the video to fill the borwoser background rather than the viewport.
Just like background images and sliders the video should be fixed in position and diplayed at viewport width and height.

Video Player Type

Video for a responsive site should be a self hosted MP4 video rather than a hosted video like Vimeo and YouTube.
Using Vimeo and YouTube creates an extra server request and gives very little control over items like preload and poster image.
Both Vimeo and YouTube have become very commercial and YouTube has a very poor user experience unless the vistor has a paid subscription.
If the video is on YouTube, download it as an MP4 file in the smallest possible size for reasonable quality. The quality can be low since the video is in the background.
To convert a YouTube video to MP4 and download it, follow the link below and enter the YouTube URL, click the "MP4 Video" tab, select the size from the dropdown and click the "Get Link" tab.

YouTube Download

Video Stage

The ThemeKit Stage Video is inserted first on the page. It is fixed in position so that the content below can scroll over it.
The widget loads a poster image on page load and has a play/pause tab. The tab can be inserted anywhere inside the video conyainer and has controls for adjusting the margins to move it away from the edges. There are controls for the icon color nad the background color and its opacity.
Options
There are checkboxes for the loop. muted and autop;ay functions. Note that autoplay requires that the video is muted or has no soundtrack.
If autoplay is selected there is a checkbox to hide the play/pause tab.
Mobile Phones
Although the video can play on phones it is a really bad idea. With this in mind there is a checkbox to hide the video and sunstitute an image instead.
The image ised in the demo has a 9:16 aspect ratio and was resized to 375 × 667px before important into EverWeb