EverWeb Widgets

Video Text Wrap

When a video doesn't need to be displayed at full width, it's usefull to be able to display it on wider screens with a heading and descriptive text to one side of it. The video will become full width on mobile devices and the text will then slide down below it.
The point at which this takes place is the "Break Point". This can be set for iPad in landscape (1059), iPad in portrait mode (799), iPhone in landscape (739) or iPhone in portrait mode (599).
Media files like audio, video and images need a text description if they are to be indexed by the search engines. Combining the text and the video in the same HTML5 container means that the search engines will know that the text relates to the video.

MP4 Video Text Wrap

When inserting MP4 video on a page that will be viewed on mobile devices, preload MUST be prevented and a poster image inserted to appear on page load. The image must have the same aspect ratio as the video file. This widget prevents preload by default.
In this example, the Video JS MP4 player occupies 50% of the width and has a 1px border set.
The container width is set to 99% with a maximum width of 1200px.
Controls
The video has options to show/hide the controls, play inline on iPhones, show/hide the fullscreen control and to set the initial volume.
There is a checkbox for muting the audio if autoplay is selected.
Text
The font can be web safe or non web safe ir Google hosted with a web safe fallback.
There are controls to style span tags. Click the link below to find out how to use spans in widgets.
Link
The optional CTA style link can be configured to open internal or external pages and in a new window if required. The link can be aligned left, center or right.

Using Spans

YouTube Video Text Wrap

The iframe is set up for a video with an aspect ratio of 16:9 which is the YouTube default. If the video has a different aspect ratio, enter the video file's width and height into the boxes provided in the widget settings.
The widget requires the YouTube ID - not the full URL.
There are checkboxes for showing the fullscreen control and for autoplay.
Auto Pause
The widget has a script added to pause a YouTube video if another one on the page is played.
Float
In this example, the video is floated right so that the text slides up the left side to wrap around it.
The CTA link option is not used in this example.

Vimeo Video Text Wrap

The iframe is set up for a video with an aspect ratio of 16:9 which is the Vimeo default. If the video has a different aspect ratio, enter the video file's width and height into the boxes provided in the widget settings.
The widget requires the Vimeo ID - not the full URL.
There are checkboxes for showing the fullscreen control and for autoplay.
Pause Functions
The widget has a couple of jQuery plugins. One will pause one Vimeo player when another is played and the other pauses the video when it is scrolled out of view.
Go to the Vimeo page to try this out

Vimeo