QuickTube.js

Demo

Setup

Is really simple. Just add the video ID to data-quicktube-video='{video-id}'

<div class="quicktube" data-quicktube="kittens">
    <div class="quicktube__video" data-quicktube-video="k6QanQUaDOo">
    </div>
    <div data-quicktube-play="kittens" class="quicktube__poster" data-quicktube-poster>
        <div class="quicktube__play quicktube__btn">
            Play
        </div>
    </div>
</div>

Initialise quicktube once jQuery is ready.

$(document).ready(function() {
    quicktube.init();
});

Using ES6 and a module bundler:

npm install --save quicktube

import quicktube from 'quicktube';
import $ from 'jquery';

$(document).ready(function() {
    quicktube.init();
});

Don't forget to include the necessary CSS.

API

You can hook to the play and pause events like this:

    $(window).on("quicktube:play", function(quicktubeId, $quicktubeEl) {
        $("[data-show-while-playing]").show();
    });

    $(window).on("quicktube:pause", function(quicktubeId, $quicktubeEl) {
        $("[data-show-while-playing]").hide();
    });