Responsive Website Video

Video Files

Professional film makers need to be able to show of their products properly by giving visitors a choice a SD and HD files to watch.
While a small video file with a width of 640px is the sensible choice for a responsive page, the quality will not be high enough for fullscreen viewing by a critical audience. If an HD file option is not available, the player's fullscreen button should be removed!
The Afterglow player is a good choice in that it allows a choice of two video files. The SD file is the default and the HD file can be selected by clicking the selector button in the toolbar.
For more professional features and a wider choice of files, check out the PLYR MP4 video player shown above.

SEO

Most webmasters seem to forget that a video without a title and text description doesn't exist as far as the search engines are concerned.
Adding video to an EverWeb page and inserting a title and description in a text box is pretty much useless since the search engines have no way of knowing that the text is related to the video.
Video players should be inserted in an HTML5 figure element with a figcaption for the video title and a paragraph for a brief description. That way, the search engines can index the video properly and it will appear in the results of a search for its title and/or keywords in the description.

Vimeo & YouTube

The most popular hosted video types are Vimeo and YouTube. Of the two, Vimeo is preferable since YouTube is really tacky.
If you must use hosted video, and only need one video per page, check out the PLYR versions by following the links below. They cut out most of the junk that YouTube throws at us and present a uniform control bar for all the videos on the web site.

Auto Pause

When several video players are inserted on a page, an auto pause function is a necessity rather than an option. While some MP4 players have this function, Vimeo and Youtube do not and what happens if you mix video types on a page?
Check out the Afterglow video page where MP4, Vimeo and YouTube are all there and auto pause when another video is played!

Fullscreen Video

Many EverWeb users have struggled with trying insert background video - usually with poor results. Background video is not really an option for responsive designs and is better replaced by creating a fullscreen video fixed in position to allow the page content to scroll over it.
The EverWeb Fullscreen Video widget gives the best of both worlds by creating a fullscreen player that can either scroll with the other content or be fixed for scroll over. The player can be set up for manual play with a poster image and optional play button or autoplay with mute and loop.

EverWeb Widgets Blog
All Rights Reserved
© EverWeb Widgets -