A picture is worth a thousand words - by that logic, a video tells 30.000 words per second
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.
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
- Download the latest version of Videobox
- Check out the
examplesdirectory for some basic examples, anddocs/index.htmlfor 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.jsinstead ofvideobox.min.js, or - there's a web animations polyfill in the
node_modulesfolder if you've installed Videobox through npm, or - there's a web animations polyfill is inside the
bower_componentsfolder if you've installed Videobox through bower
<a
href="player-url"
rel="videobox"
title="Video title"
data-videobox="JSON-encoded options"
>
Link text / thumbnail
</a><a
href="player-url"
rel="vbinline"
title="Video title"
data-videobox="JSON-encoded options"
>
Link text / thumbnail
</a>Videobox is a JavaScript player effect, if you're looking for Videobox extensions, you can find them here:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent