EverWeb Responsive Big Vimeo

Click image to play/pause

EverWeb Responsive Big Vimeo

Viewport Size Vimeo Video

Making a big splash with video is better done by getting the video to fill the viewport rather than inserting it in the page background.
An item which is set to 100 vw in width and 100vh in height will fill the browser or device window.
The Vimeo iframe is made to fill the browser window - no matter what size it is - using viewport units, intrinsic ratios and CSS transform.
The result would be pretty much useless to those with small laptops or touch devices like the iPad and Phone. For these devices, the YouTube iframe is made responsive using the CSS ::before and ::after psuedo elements - one floated left to set up the responsive container and the other to clear the float.
If viewing this page on a computer, increase the browser to full width and then reduce it to the width of a phone to see the changes.
Aspect Ratio
By default, the widget is set up to work with the standard size of video which is 560 x 315 with an aspect ratio of 16:9. For a video with a different aspect ratio, enter its width and height into the widget settings and the correct aspect ratio will be calculated by the CSS.
Controls
There are checkboxes to allow fullscreen and to play inline on iPhones.
The only other control is a checkbox to turn on autoplay although this is definitely not recommended.
Overlay
The optional h1 heading sits at the bottom of the viewport when viewed on computers and below the video when viewd on touch devices
The heading is centered and has controls to set different styles for computer and mobile.
The text block is only visible on hover and has controls for positioning it left or right and itop or bottom.

© EverWeb Widgets -