Website Video
For The Professional
AV Headline
Make headlines using this hero style widget with graphic style animated text and horizontal links. The image is inserted in three sizes for the various devices and have a lazy load option,
Website Video
Most of the standard methods of displaying website videoare not recommended for responsive web page designs.
A video player must display a poster image and prevent the video file from downloading at page load or use lazt loading.
File Size
Video files tend to be huge so it is really important to keep the file size as small as possible by providing an SD file at page load and giving the visitor the choice to upgrade to HD version if they want better quality or to view fullscreen.
Hosting
Hosted video like Vimeo and YouTube should only be used as a last resort. They are really ineficient and require lots of requests from another server.
Self hosted MP4 video is the best since the file size and quality can be controlled and the video fies are hosted on the same sever as the page content.
If the file is only available on YouTube it can be download as MP4 in one or two suitable sizes using a free online converter.
Video Players
Video has the same problems as image files except more so. The compromise is always between quality and download speed.
Avoid using a content width video player since the quality required for computer viewing involves a file that is much too bif to download on mobile devices.
If content width is required use a player that will offer two files - SD and HD.
Using a responsive container with two columns reduces the requirement for quality but the viewing experience is not so greate.
Lightbox Video
Using a smallposter image with a play tab to open the video in a lightbox window is the best way to go - especially with hosted video like Vimeo and YouTube.
Using this method means that only a small image needs to be downloaded at age load and all these extra requests and file downloads aren't required until the visitor decides to view the video.
MP4 Video
A self hosted MP4 video with poster image and an option to load an HD version of the image.
This info section is for the video title and a brief text description for the search engines.
Vimeo/YouTube
This is the same video and poster image as above except the video is hosted on YouTube.
Note how the trashy YouTube video player has been replaced with a better look and control bar with light/dark option. With this player the initial volume can be set andthe initial volume can be set.
One of the great advantages of this type of player is that fact that, if a video is playing and another is selected, the first one will pause.
AV Video [2]
An MP4 or Vimeo/YouTube player paired with an article with a heading, text and an optional link.
LightboxVideo
Grid Layout
Using a two column grid for video and its accompanying title and text description has the benefit of allowing a smaller poster image and video file to be used.
The player can play self-hosted MP4 and hosted Vineo or YouTube. The mp4 player has the option of loading an SD and an HD video file.
The relative widths of the columns can be adjusted and the layout switch above the breakpoint.
Below the breakpoint the text can appear above or below the image.
The player's aspect ratio can be changed to siut formats other than the standard 16:9.