Full Width Responsive Vimeo & YouTube Modules

YouTube Video

A YouTube video with the poster image aspect ratio 11:6 set to 100% width.
The font is Exo and is Google hosted.
The container minimum height is set to 400px to keep them all the same height.

Vimeo

Vimeo videos can be inserted in the same way as YouTube by entering the ID number.
There is a checkbox to insert the correct URL type for Vimeo.

EverWeb Full Width Design

The thumbnail is square PNG with 50% width.
The video description can extend to two or more lines by using an HTML5 line break <br> for returns.

Full Width Vimeo YouTube Widget

Images & Video Files

The thumbnail images should be cropped to approximately the size they willl appear on the web page.
The videos only require the ID number - not the full URL.
When inserting YouTube videos, simply insert the ID. Vimeo videos require the ID and the box checked since the URL has a different format from the YouTube one.

Full Video Modules Widget
Full Video Modules Widget

Widget Settings

Check the "Full width" box in the Metrics inspector and set the module container's maximum width.
Set the module minimum height and its width. This width should be no more than one third of the page content width.
Set up each container by entering the heading, choosing the image and setting its percentage width, entering the descriptive text and the video ID number.
Check the box if the video is hosted by Vimeo rather than YouTube.

Styles

Enter the font family name, check the box if it is Google hosted, choose a suitable web safe fallback font and set the font color.
Set the text align and line height.
Set the container background color and its opacity.
Set the border width, color and corner radius if required.
Set the box shadow radius and color if required.
Adjust the container padding if necessary.
Set the font size for the heading and the text description.
Set the description text align and line height.
Set the Play Button background, hover background and arrow colors.

Fix Or Fade On Scroll

The modules can be fixed when used with a slide over layer by checking the "Fixed Position" box in the Metrics inspector.
For fade on scroll, check the box and enter the scroll amount.

This widget is included in the Full Width widget pack.

EverWeb Widgets | Full Width