Hero Slider Lightbox Video

The full width fixed height slider lazy loads images which have a centered video play button. The button launches a lightbox window with a video.
The lightbox video can be an MP4, Vimeo or YouTube which will autoplay as long as the browser or device allows it to. The video will pause when the lightbox window is closed by clicking the "X" or the lightbox overlay.

Video

The video in the lightbox is responsive with a maximum width determined by the width of the video file. To allow this, the video container is given an intrinsic aspect ratio which is set in the widget settings. The default value is 56.25 which is suitable for videos with an aspect ration of 16:9. The ratio can be calculated for other sizes of video file by dividing the height by the width and multiplying the result by 100.

Vimeo & YouTube

Vimeo or YouTube hosted videos are inserted by checking the appropriate box in the widget settings and entering the video ID.
The first two slides in the example above open a Vimeo and a YouTube video respectively. Most of these videos have a 16:9 aspect ratio so the default value for the intrinsic aspect ratio will do.

MP4 Video

The third slide opens an MP4 video which was dragged into the EverWeb Assets List and selected by the large "Choose MP4" button.
Note that the example video file is HD with a cinemascope aspect ratio of 21:9. Since the container is set for 16:9, the video is letter boxed.

Video JS

The fourth slide opens a video player which uses VideoJS to show a uniform control section in all browsers. This video is set up on another page using a responsive VideoJS widget. Since the page background is set to solid black like the lightbox overlay, the fact that the cinemascope HD video doesn't fill the height of the container is not noticeable.

Fullscreen

All the different video types can be played at fullscreen if required although this will require an HD quality video file if viewed on a large computer screen.