ThemeKit AV

Responsive Website Video

Video Players

Video files tend to be large and need special consideration to prevent them from compromising the page download time - especially on battery driven mobile devices.
Video Hosting
Website video files can be self hosted on the same server as the website files or hosted by Vimeo or YouTube.
The preferred method is to self host them since Vimeo and YouTube require a whole bunch of files to be download even if the video isn't played and require many requests from another server which is not a good idea.
If Vimeo or YouTube must be used it should be inserted as a lightbox player which is set up properly to lazy loadthe video and all its extra files.
Using a lightbox avoids having to see that cheap & nasty YouTube video player on page load.

MP4 Video

MP4 video files can be played natively in the browser so this is the preferred method since it doesn't require any extra scripts. The main problem is that the HTML5 video player has no method of loading a smaller file for mobile devices.
HTML5 Video
The basic HTML5 player used by the browsers is a good starting point as long as a poster image is shown at page load and the video file is prevented from downloading until the visitor wants to play it.
If the video player is content width or wider, use a widget that loads a smaller file for mobile devices.
If only one file can be loaded, make sure the player is no wider than 800px.
Make sure the video is inserted in an HTML5 <figure> container with the video title and description in the <figcaption>.
Follow the link below to see suitable video players …

HTML5

Video Essentials

These are the main points to consider when choosing a website video player …

Optimise the video file size before importing into EverWeb
Content width video should load two sizes of video file
Show a poster image at page load
Resize and optimise the poster image before importing into EverWeb
Prevent the file from downloading until the video is played
Avoid using Vimeo or YouTube
Convert YouTube to MP4
If Vimeo or YouTube must be inserted use a lazy load lightbox
Use an HTML5 player in preference to jPlayer, Media Element, Plyr, VideoJS
The video title and description must be inserted in the same HTML5 container as the video
Use keywords in the description for the search engines

Convert To MP4

Converting Vimeo and YouTube to self hosted MP4 allows a choice of video file size and greatly improves download efficiency.