The grid layout has an image with a video icon and an <article> with heading, text and an optional link.
Lightbox
The icon is the action tab to open the video in an overlay with options for a border, bottom box shadow and adjustable overlay background color and opacity.
Video
The MP4 video file is inserted in two sizes and has a lazy load function to prevent it from slowing the page download.
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 a link to the hosted version.
Hosted video like YouTube & Vimeo are not the best choice for a responsive site that will be viewed on smart phones.
They have very poor download performance since they need to download a whole bunch of assets from another server even if the visitor doesn't play the video!
To overcome this problem the video needs to be lazy loaded and appear in a lightbox window.
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 a link to the hosted version.
Most footers are unsuitable for responsive web pages. They waste a huge amount of space when viewed on a smart phone and the info is stuffed in making it difficult to find the essential contact info.
The ThemeKit RWD Footer widget has a three column grid layout with all the required items in a compact size.
The first column has a a text block, the next one has navigation links and the last column has a smooth scroll to the top function, the optional phone number/phone call function and a spam protected email function.
The copyright notice spans all the columns at the bottom and has the option to insert the copyright year automatically and update it annually.
Footer Bar
For those who appreciate that the footer is a total waste of space and has no place in a page that will be displayed on mobile phones check out the Footer Bar …