An MP4 video player opens in a custom lightbox. The video is prevented from downloading until the visitor interacts with the play button.
Lightbox
The video has a caption element for the video title. The styled close button is optional since the lightbox can be closed by clicking/tapping the overlay
The media box widgets can display an image, slideshow, MP4 video or YouTube video in a lightbox window.
The main advantage of using a lightbox is that the media doesn't download at page load and only does so when the visitor opens the box.
This makes for a noticeable improvement in page download speed - especially on mobile devices.
Media Box
The media box has a two column grid layout with an image and an article element. The image acts as the trigger to open the lightbox. The Video and YouTube versions have a centered play tab.
The relative column widths are adjustable and the layout can be switched. The text can appear above or below the image on screen widths below the breakpoint.
The optional link can have a chevron hover animation if required.
Lightbox
The overlay has controls for its background color and opacity. The content has the option of adding a border and/or a bottom box shadow.
Hosted video like YouTube has a really bad effect on the page download speed. A default YouTube player should never be used on a responsive page.
YouTube video downloads a whole bunch of files on page whether the video is played or not.
In this example the Video will not download on page load and, when the visitor plays hits play it is lazy loaded.
The image acts as a trigger to open a custom lightbox window with a slideshow.
Lightbox
The slider images are lazy loaded with previous and next preloaded to prevent delays.
The caption, action tabs and the close icon share the same color and background color.
The slideshow stage can be styled with a border and/or a bottom box shadow.
The overlay has controls for background color and opacity.
Slide [1]
Slide [2]
Slide [3]
Some website "designers" like to cover their pages with grids containing a whole bunch of thumbnails that open in a lightbox slider. This practice may be OK on a page that will be viewed on computers and large tablets but what about phone users? They are soon going to give up and go elsewhere.
Using a single image as a trigger to launch the slideshow combined with a title and description of the image content makes a lot more sense.
The ThemeKit Media Box Slider not only lazy loads the slideshow images but also has the option to lazy load the trigger image for a much faster page download time.
Menu
