In this example the widget is displaying a self hosted MP4 inserted in SD and HD sizes. The SD file loads by default and the HD file is substituted using a tab in the control bar.
Layout
The relative widths of the columns can be adjusted and the text can appear above or below the video player below the breakpoint.
Video [2]
Responsive Video Essentials
Responsive MP4 self-hosted video requires a player with the following …
[1] Display a poster image on page load
[2] Prevent the video file(s) from downloading at page load
[3] Insert two video files - one for computer users and a much smaller one for mobile devices.
Hosted Video
Hosted video like Vimeo and YouTube should be avoided if possible or lazy loaded and opened a lightbox window.
If the video must be hosted with Vimeo or YouTube use an MP4 on the web page and provide link to the hosted version.
In this example the layout has been switched and the player configured to show a Vimeo or YouTube video.
The link has the optional chevron animation on hover.
No To YouTube
Comparing the two versions of the video player above it can be seen how tacky the YouTube player is and how it makes the page design look cheap and nasty - totally unprofessional.
Apart from the design factor, the main reason for avoiding hosted video is its inefficiency. A chunk of assets are downloaded at page load and there is a corresponding number of server requests which have a negative effect on the page download time.
The only good reason to host with YouTube is the extra exposure it may get. On the other hand it makes it too easy for the visitor to leave the site to watch it on the YouTube website and never return!
About Footers
While just about every website has one there is no rule that says it must have a footer. Many websites have a large footer jam packed with info that is hard to find and read and holds no interestimg items or info for most visitors.
Having a footer like that on a webpage that will be viewed on movile phones is totallyy unnecessary and a complete waste of space.
Copyright Notice
The Responsive Copyright Noticer provides a replacement for the footer. It has a grid layout with three items.
The icons are SVGs with a hover backgroud animation and the background can be a two color gradient.
Link
The first link is to an info page that has all the usual stuff that is usually in the footer. It has the option to change the icon so that it can be a link to the home page or any other "must see" item.
©
The copyright notice is in column two and has the option to add a function to insert the copyright year and update it.
Scroll Top
The last tab is a smooth scroll to the top function which is an absolute must for responsive pages.
Content Fade In
The widget includes a function to fade in the page content in a smooth and professional manner. The animation time is adjustable to give media content a little extra time to load.
Menu