video-reveal v0.2.1

Video-Reveal

Video Reveal is a 478 byte (GZIP) script for lazy loading YouTube videos. It will load YouTube player only when the user needs it. Video Reveal saves a lot of requests and bandwidth for your users, which also improves your page load speed.

Getting Started

<div class="video-reveal" data-minimal="true" data-thumbnail="COVER_URL" data-videoid="VIDEO_ID"></div>

• Include Video-Reveal JS and CSS files.
• Add a div where you want the video or videos to be located. The only required data attribute is data-videoid, this is should be a YouTube video ID. data-thumbnail is an URL to your custom background image. data-minimal is for minimal YouTube player without controls, info, and related videos.
• Call the script videoReveal()

There are a few script options you can use:

• Selector for videos, default is videoReveal('.video-reveal')
• Option to add play button or not videoReveal(, true). Useful for greater styling possibilities.

Accessibility

Video Reveal allow to control play/pause of videos with keyboard only, even in minimal mode, when all video controls is hidden. Don't forget to change aria-label attributes with proper description.

Example

To see a live example you can check out the demo folder or demo page.

Maintainers

• Oleg Vdovenko (olhapi)

A list of all contributors is available on Github.

LICENSE

See LICENSE file.