Buzz Video Box

In this example the 16:9 aspect ratio poster image is sized at 960px wide and both an HD and an SD video file are selected.
Loading
A video player must show a poster image at page load, the video file should be prevented from downloading at page load and preferably be lazy loaded.
Video Info
Most video players have no means of inserting text with keywords for the search engines. To make this happen the video title and description should be enclosed in the same container as the video.
Autopause
If one video is playing it should pause when another is selected.

Video Players

These video players use HTML5 video with a small custom script to allow combining HD and SD files and an autopause function.
Popular players such as Afterglow, Jplayer, MediaElement, Plyr and VideoJS should be avoided due to the size of the required supporting files.

Buzz Video Box

Most video widgets available to EverWeb users are not suitable for responsive websites. If the player is content width the video file must be inserted in two sizes with a smaller one for mobile devices.
The Video Box uses a two column layout above the breakpoint so that the video file size can be reduced to about half of the content width.

Video Essentials

Apart from sliders and galleries with too many oversize and unoptimised images the biggest cause of slow page download is video.

• Use self hosted MP4 video in preference to Vimeo or YouTube
• The player must display a poster image on page load
• Use an MP4 video player which loads a smaller file for mobile devices
• Video files should be prevented from downloading at page load
• Vimeo and YouTube have poor download efficiency
• If Vimeo or YouTube is a must - use lazy loading
• If two or more videos are inserted provide an auto pause function
• Poster images must have the same aspect ratio as the video file
• Keep poster images as small as possible and optimise them
• In general the video file's width should be about half that of the containers max width.

Hosted Video

Hosted video such as Vimeo and YouTube dowload a whole bunch of assets a page load even if the video isn't played.
If the video is hosted on Vimeo or YouTube, download the file in two sizes as MP4 to self host them and provide a link to the online version.
The player assets and the video file create a whole bunch of remote server requests that effect download performance.
Check out the info page for more about page download speed …

Buzz YouTube

Hosted video like YouTube & Vimeo are not the best choice for a responsive site that will be viewed on smart phones.
To make it better the video should be lazy loaded in a lightbox box window.

Vimeo & YouTube

Hosted video such as Vimeo and YouTube dowload a whole bunch of assets a page load even if the video isn't played.
If the video is hosted on Vimeo or YouTube, download the file in two sizes as MP4 to self host them and provide a link to the online version.
The player assets and the video file create a whole bunch of remote server requests that effect download performance.
Check out the info page for more about page download speed …