ThemeKit Responsive

Video

Responsive Video Essentials

Responsive MP4 self-hosted video requires a player with the following …
[1] Display a poster image on page load
[2] Prevent the video file(s) from downloading at page load
[3] Insert two video files - one for computer users and a much smaller one for mobile devices.
Hosted Video
Hosted video like Vimeo and YouTube should be avoided if possible or lazy loaded and opened a lightbox window.
If the video must be hosted with Vimeo or YouTube use an MP4 on the web page and provide link to the hosted version.

Video Title

A video player should be inserted in an HTML5 figure element with the title and description for the search engines in the figcaption element.
The description should be informative and use keywords which relate to the video content.

Lightbox

Self Hosted MP4 Video

Self hosted video is preferable to hosted video - Vimeo & YouTuve - for responsive pages since Vimeo & YouTube download a whole bunch of assets on page load.
Video files must be prevented from downloading until the visitor choses to play it - especially for mobile phone users.
ThemeKit Responsive Video
The player shows a poster image on page load. Two MP4 video files are inserted. An HD file for computers and laptops and an SD file for mobile devices.
The optional description area has fields for the video title, the video description and an optional internal/external link which can have a chevron animation on hover.
Container
There are options for two borders - one for the video stage and the other for the container. The container has an option to add a bottom box shadow.
Wrapper
The wrapper can have a solid color or two color gradient background and has controls for top, left/right and bottom padding to provide adequate spacing.

Vimeo & YouTube

Video Title

For the best search engine results and user experience video should be inserted in an HTML5 <figure> container with a title and description in the <figcaption>.
For a responsive website a hosted video like Vimeo or YouTube MUST have a lazy loading function. This one does!
Mote that the video stage may disappear from view in the EverWeb ddesign canvas when lazy loading is selected.

Video [2]

Vimeo & YouTube

If Vimeo or YouTube must be used due to a clients's wishes or lack of server storage space remember that most players are not suitable for use on responsive websites.
Options
The player above will prevent the video for slowing the page download time if the "Lazy Load" function is turned on prior to publishing.
Unfortunately it can't do anything about YouTubes ugly interface which makes even a good web page design look cheap and nasty.
A much better option for YouTube is to remove it from view on page load and display it using a lightbox …

YouTube Media Box