Lightbox Video Players

Displaying multiple videos on a page is kind of messy and can be very inefficient - especially if different player types are used.
Using a lightbox is much more efficient since only a small thumbnail image needs to be downloaded at page load. The images used in this demo are only 360 x 240px and the play button is created using CSS so there is no PNG image to download.
Adding text with the video title and a description of the content allows the search engines to index the video info.
Layout
The grid layout has an image with alt text and a play button and a text block. The grid has 11 columns. Both items span 5 columns and the text can be extended to span 6 columns to overlap the image by checking a box.
As can be seen from the above examples, the position of the items can be switched to give a staggered layout.
MP4 Video
The EW Video MP4 Lightbox player has the option to load both SD and HD video files, to set the initial volume and to choose between a dark or light control panel.
The video file's width and height are entered into the widget settings and the width of the file dictates the maximum width of the lightbox video. There is a checkbox to allow it to over scale and fill the browser window width.
Another checkbox turns on a control to close the lightbox window when the video has finished playing.
Vimeo & YouTube
The EW Video Lightbox just requires the video ID to be entered and to check a box if the video type is YouTube. The video size is responsive up to a maximum width of 1200px.
Styles
The container has controls for the background color and its opacity and for vertical and horizontal spacing.
The text can use a Google hosted font with a web safe fallback if required and its background has controls for color and opacity.