AV Hero
Animated article with optional link
HeadlineDisplaying a video in a lightbox window has a lot of advantages - especially when using hosted video like Vimeo and YouTube. This video types download a whole bunch of scripts on page load whether the visitor wants to view them or not.
Loading Vimeo or YouTube in a lightbox prevents this happening until the visitor decides to watch the video.
Appearance
Although Vimeo has a better looking interface, YouTube videos really spoil a page design if seen on page load so using a lightbox makes sense for those who want a professional look rather than cheap and nasty.
The hero loads three sizes of images for the various devices and has an animated orticle with a heading, text and an optional link.
The article can be vertically aligned at the top, center or bottom.
The grid layout has a <figure> with optional caption and play tab and an <article> with heading, text and an optional link.
Lightbox
Clicking/tapping the image opens a lightbox MP4 video with optional caption, border, bottom box shadow and adjustable overlay background color and opacity.
The lightbox MP4 video shown above has been built from the ground up to create a highly efficient video lightbox suitable for responsive web pages;
The lightbox video has options for adding the video title and a border and/or bottom box shadow to give a more professional appearance.
As requested by many EverWeb users the lightbox overlay has controls to change its color and opacity.
The video stage has a maximum width setting to help maintain quality when a reduced size video file is inserted.
Open a Vimeo or YouTube video in a lightbox window with options for styling the overlay background color and opacity and for adding a border and/or a bottom box shadow.
VideoThis example shows a Vimeo hosted video which has the benefit of looking a lot better than YouTube but is noticeably slower to load in the browser.
Audio