MP4 Video Option

MP4 Video - HD Option

ThemeKit MP4 Video Player

The Themekit video player is shown here with a self hosted MP4 video file. The control bar replaces the default browse HTML5 players with its own dark or light controls for a better viewing experience.
The player is set for 16:9 aspect ratio video files by default but this can be changed for other aspect ratios such as the old 4:3 and cinema style HD formats.
HD Option
The example player shows the option for the visitor to switch to an HD version of the video if they are viewing it on a desktop computer and/or want to view at full screen.
There is an option to insert the video title in the same container for better SEO.
The play button has controls for color, background color and its opacity and hover color.
Layout
The video player is centered with a maximum width setting to suit the size of the video file.
The container can have a border and/or a bottom box shadow for better definition and to lift it off the page.
There are options for top, left/right and bottom spacing. Extra bottom spacing is required when the bottom box shadow is used.
Follow the link below for more info about inserting video in a responsive page …

Video Info

ThemeKit Text Wrap

Using a text wrapped image on a responsive page has some advantages. The image is not required to be full width so a much smaller image file can be used with the benefit of faster page download.

ThemeKit Text Wrap

Widget Features

The image can have either a fixed width or a percentage width on browser.screen widths above the break point. It becomes full width when the viewing device screen width is less than the break point.
The image has alt text and can have a border if required. The spacing between the image and the text to the right can be adjusted.
Headings & Text
Both the main heading and the wrap text heading are optional and have controls for alignment.
The lead in text above the image is also optional.
As can be seen from this example, the text can use a Google hosted font with a web safe fallback and spans can be inserted for paragraph headings. The span text has its own controls for font size and color.
For info about using spans, follow the link below.
Link
The optional CTA style link can be configured to open internal or external pages and has a new window option. The link can be aligned left, center or irght.

Spans

ThemeKit SVG Heading

The heading has the option to insert an SVG icon so that it can be used as section dividers on long pages. SVGs are far superior to PNGs and text icons like Font Awesome. The quality is way better and they can be styled using CSS.
The ThemeKit download folder has a folder of SVG icons. Choose an icon, and double click it to open it in TextEdit.app set to plain text mode or in a code editor. Copy the code and paste it into the widget settings panel.