Responsive MP4 Video

The most efficient way to show video on a website is to play it natively in the browser using the HTML5 <video> tag. This requires no javascript to run it and flatten the battery on mobile devices.
Since all modern browsers now support the MP4 format, it is not necessary to use fallback file types such as OGV and WebM unless really old browsers need to be supported. The MP4 should be in the H.264 format and ideally be optimised for internet streaming.
HTML5 video is also the easiest way to insert responsive video since it is just a question of giving it a percentage width and auto height.
Like all video players, the video file should be prevented from downloading on page load and the video stage should display a poster image. This is especially true for mobile pages so that the visitor doesn't have to use up their data allowance if they don't actualy watch the video. It also helps the rest of the page content download a lot faster.
The downside to using HTML5 video is that each browser has its own style of control bar. If a uniform control bar is required for all browsers and devices, use the VideoJS widget shown on the next page.
Search Engine Optimisation (SEO)
For best SEO results, videos, images and slideshows should be inserted in a container with a description. Otherwise the search engine spiders have no way of knowing what the video is about other than from any keywords used in the file name.
The widget has options for adding a heading and descriptive text. Since these are in the same parent container as the video and poster image, the search engines will see that this text is related to the media files.
The text can use a web safe font or a non websafe or Google hosted font with a web safe fallback. The heading can be styled for font size and text align and the text for size and line height.
CTA Link
The optional CTA style link can be configured to link to an internal or external page with the option to open in a new window. It can be used to link to a zip file of the video so that visitors can download it and watch it at their leisure.
Footer
The optional footer is fixed height with one line for the copyright info. The © symbol is created using &copy;
The font color, size and background color can be adjusted. There is a checkbox for adding a script to auto update the copyright year and another for adding a smooth scroll, back to the top chevron.

© EverWeb Widgets -

EverWeb Widgets