JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<p class="container"><video src="http://darcyclarke.me/work/fi/uploads/videos/1.mp4"><a href="#" class="close">Close Full Screen</a></p>
<p><a href="#" class="open">Open Full Screen</a></p>

CSS

video {
    width: 300px;
  height: auto;  
}

JavaScript

//
// FullScreen Plugin
//
// Adds: 
// $.support.fullscreen (a boolean for RequestFullScreen support)
// :fullscreen pseudo selector & filter (.is .find .filter)
// $(el).bind("fullscreenchange",fn)
// $(el).trigger("openFullScreen", fn) or $(el).openFullScreen(fn)
// $(el).trigger("closeFullScreen", fn) or $(el).closeFullScreen(fn)
//
// Uses:
// :-webkit-full-screen and :-moz-fullscreen (no fallback)
// webkitfullscreenchange, mozfullscreenchange and falls back to load / unload events with popup
// 
// 
(function($){

    //
    // Helpers
    //
    $.fullscreen = $.fs = {};
    
    // Settings
    $.fs.callback = function(cb){
        if(!$.fs.loaded){
            $.fs.loaded = true;
            cb.call($.fs.window_handler);
        }  
    };
    $.fs.timeout            = 50;
    $.fs.loaded             = false;
    $.fs.fallback           = true;
    $.fs.window_handler     = window;
    $.fs.window_name        = 'fullscreen';
    $.fs.window_url         = '';
    $.fs.window_settings    = {
        height: window.screen.height,
        width: window.screen.width,
        directories: 0,
        location: 0,
        menubar: 0,
        resizable: 0,
        status: 0,
        toolbar: 0,
        scrollbars: 0
    };

    // Vendor Prefixes
    $.fs.prefixes       = '-webkit- -moz- -o- -ms- -khtml- '.split(' ');
    $.fs.domPrefixes    = 'Webkit Moz O ms Khtml '.split(' '),

    // Events to Bind/Unbind
    $.fs.change     = 'fullscreenchange'.split(' ');
    $.fs.request    = 'requestFullScreen RequestFullScreen RequestFullscreen'.split(' ');
    $.fs.cancel     = 'cancelFullScreen CancelFullScreen ExitFullscreen'.split(' ');
    
    // Pseudo Selector
    $.fs.selectors  = 'full-screen';

    // Element we use to test against
    $.fs.Elem       = document.createElement('div');

    // Supports Event
    $.fs.isEventSupported = function(eventName) {
        var el = $.fs.Elem;
        eventName = eventName;
        var isSupported = (eventName in el);
 ...