Using a two column container for a video player and its description means that a much smaller poster image amd video file can be used and a separate file for mobile devices isn't necessary,
SEO
This article should contain the video title and a descriotion with keywords for the search engines.
Video files are the main reason for poor web page download performance. For best results the video should use the native HTML5 browser player rather than a custom player like VideoElement, Plyr or VideoJS.
Important
When the video is displayed at content width the player must have the option to load a smaller file for mobile devices.
The video file and the poster image can be reduced to the actual size that it displays at in the browser - or less.
Quality
It is important to experiment with size versus quality. Use the minimum size of video file that gives good quality in all browsers and devices.
Autopause
If there are two or more players on the same page it is useful to have an auto-pause function where the active player pauses when another is played.
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.
Converting Vimeo and YouTube to MP4 has the added advantage of being able to download the file in the two or more sizes required for responsive video.
Follow the links below to convert to MP4 …
Open a Vimeo or YouTube video in a lightbox window with options for styling the overlay background color and opacity and for adding a border and/or a bottom box shadow.
GalleryUsing Vimeo and YouTube players on a responsive page is not desirable. They both require a whole bunch of files to be downloaded whether the the visitor plays the video or not.
They also make a whole bunch of requests to a server other than the one hosting the website and this is not very efficient.
If Vimeo or YouTube has to be used for some reason the best option is a lightbox. That way the video and all its ancillary scripts and files won't download until the lightbox is opened.
In the case of YouTube, using this method means that its tacky interface will not be seen on page load.
The video is inserted in an HTML5 figure element with the title and description in the figcaption element so that the search engines will relate the text to the video.
The player above shows an HD file when viewed on computers and laptops and an SD file when viewed on tablets and phones.
The video files and the poster image all have an aspect ratio of 2.39:1. The sizes are …
Poster Image - 854 × 358 - 16KB
SD Video - 426 × 178 - 2.7MB
HD Video - 854 × 358 - 5.9MB
The video file sizes were optimised using the Freeware Miro Video Converter.
Autopause
Both the MP4 players on this page have an auto-pause function where the active player pauses when the other is played.
