Video JS

The widget on the previous page allows MP4 video to play natively in the browser using the HTML5 <video> tag. As pointed out, this means that the controls will differe epending on the browser used to view it. If it is desirable to have a uniform look in all browsers and on all device types, using the VideoJS script is the best way to do it if a responsive video is needed. It will also provide support for older browsers with flash fallback.
On page load, a poster image appears and the video file is prevented from preloading to allow a faster page download time. The video file only downloads if and when the visitor decides to play it.
Media Files
The video file and the poster image should be the same size or, at least, have the same aspect ratio. The MP4 should be in the H.264 format and ideally be optimised for internet streaming.
Make a note of the width and height of the video since these have to be entered into the widget settings to allow the javascript to calculate the intrinsic aspect ratio which is required to make the video responsive.
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.
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