videobox

v6.0.0-rc15

Published

2 years ago

Pop-up video player plugin

Downloads

0High
0Medium
0Low

hitko

html5 video audio css3 jQuery player pop-up slider gallery oembed iframe zepto

A picture is worth a thousand words - by that logic, a video tells 30.000 words per second

It's important to remove videos from your page

Whatever the occasion, you can always open YouTube, find a video, and copy the embed code, which looks something like this: <iframe src="https://www.youtube.com/embed/...">. And when you put that code on your page, something horrible happens: visitors have to wait for the player to load, it's eating away their bandwidth, it's storing those pesky cookies, and, if they're using a not-so-powerful device, the additional rendering required by the iframe is making your site appear laggy. And that's just one iframe, if there are several videos on the page it just makes things worse!

Social networks are smart - they don't load the full player, they only show a play button with a thumbnail image. This reduces the total bandwidth and rendering time to a minimum, and only when user clicks the play button, the player actually loads and the video starts playing. You can do the same - that's where Videobox comes in. Just replace your existing <iframe src="{player_url}"></iframe> with <a href="{player_url}" rel="videobox">Play video</a>, and you're ready for the next-generation video content.

Aren't there already widgets for this?

Yes there are ... umm, actually ... just google video lightbox or video popup and see for yourself, I won't blame you if you pick one of those over Videobox. And I'll totally understand when you come back and click Download.

Videobox is different from other similar widgets in a few key aspects:

Completely free - Even for commercial use
Fully responsive & mobile-friendly - Using vector icons instead of sprites, Videobox looks good even on high-density (retina) screens
Better animations - Web animations API allows modern browsers to utilise GPU and make smooth animations while rendering Videobox effects
More than just a pop-up - Videobox comes with a pop-up player, inline player, and a slider (carousel)
No dependencies - Videobox doesn't depend on jQuery, Zepto, MooTools, or other third-party libraries*
Small - Videobox is only 19 KB (5 KB gziped) total

Getting started

Download the latest version of Videobox
Check out the examples directory for some basic examples, and docs/index.html for the documentation
Include Videobox on your website:

add <link href="path/to/videobox/dist/videobox.min.css" rel="stylesheet"> to the <head> tag
include <script src="path/to/videobox/dist/videobox.min.js" type="text/javascript"></script> before the </body> tag*

*Since some older browsers don't support web animations yet, there's a Videobox + polyfill bundle in the dist filder:

use videobox.bundle.js instead of videobox.min.js, or
there's a web animations polyfill in the node_modules folder if you've installed Videobox through npm, or
there's a web animations polyfill is inside the bower_components folder if you've installed Videobox through bower

To insert a pop-up player

<a
    href="player-url"
    rel="videobox"
    title="Video title"
    data-videobox="JSON-encoded options"
>
    Link text / thumbnail
</a>

To insert an inline player

<a
    href="player-url"
    rel="vbinline"
    title="Video title"
    data-videobox="JSON-encoded options"
>
    Link text / thumbnail
</a>

Videobox extensions

Videobox is a JavaScript player effect, if you're looking for Videobox extensions, you can find them here:

Published

Vulnerabilities

Links

Maintainers

Keywords