Media Manager CSS Tricks

by Frank Taylor

HTML

<h1>SDL Media Manager</h1>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <section>
        <figure class="sdlmm sdlmm--triangle" data-sdlmm-url="https://poc5.dist.sdlmedia.com/Distributions/?o=8CC0A9B4-5823-4136-98CD-67C0EB436641" data-sdlmm-autoplay="true" data-sdlmm-loop="true"data-sdlmm-volume="0.0" data-sdlmm-type="json">

        <figcaption class="sdlmm__caption">
            <h2>CSS Tricks: Triangle</h2>
            <p>Uses a class name</p>
            <pre>
                .sdlmm--triangle    
            </pre>
        </figcaption>

        </figure>
        <figure class="sdlmm sdlmm--circle" data-sdlmm-url="https://poc5.dist.sdlmedia.com/Distributions/?o=7045941B-0652-49ED-A5A9-240A91636FE5" data-sdlmm-autoplay="true" data-sdlmm-loop="true" data-sdlmm-volume="0.0"  data-sdlmm-type="json">
        <figcaption class="sdlmm__caption">
            <h2>CSS Tricks: Circle</h2>
            <p>Uses a class name</p>
            <pre>
                .sdlmm--circle    
            </pre>
        </figcaption>
        </figure>
        <div class="sdlmm__caption">
            <h2>CSS + HTML Tricks: Boxes</h2>
            <p>Add a few divs in front of the video</p>
            <pre>
                &lt;div class="sdlmm__overlay"&gt;
                &lt;div class="sdlmm__overlay__square"&gt;

            </pre>
        </div>
        <figure class="sdlmm" data-sdlmm-url="https://poc5.dist.sdlmedia.com/Distributions/?o=C7AA603E-49CE-4329-9648-6C630162BC93" data-sdlmm-autoplay="true" data-sdlmm-loop="true" data-sdlmm-volume="0.0" data-sdlmm-controls="true" data-sdlmm-type="json">
        <div class="sdlmm__overlay">
            <div class="sdlmm__overlay__square"></div>
            <div...

CSS

section {
  width: 850px;
}
.sdlmm {
  position: relative;
  width: 850px;
  border: 2px solid #434445;
}
.sdlmm__video {
  object-fit: contain;
  transition: all 1s ease-in-out;
}
.sdlmm__video--background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.sdlmm__caption {
  padding: 0.618em;
  background: rgba(180,180,180,0.6);
}
.sdlmm[data-sdlmm-space="background"] {
  height: 480px;
}
.sdlmm[data-sdlmm-canvas-effects] .sdlmm__video {
  visibility: hidden;
  position: fixed;
  left: -9999em;
  width: inherit;
}
.sdlmm__overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  transition: all 1s ease-in-out;
}
.sdlmm__overlay:hover .sdlmm__overlay__square {
  outline: 0em solid #fff;
}
.sdlmm__overlay__square {
  flex-grow: 1;
  flex-shrink: 1;
  width: 8em;
  height: 8em;
  outline: 2em solid #fff;
  background: transparent;
  transition: all 1s ease-in-out;
}
.sdlmm--triangle .sdlmm__video {
  clip-path: polygon(0% 100%, 50% 0%, 50% 0%, 100% 100%);
  -webkit-clip-path: polygon(0% 100%, 50% 0%, 50% 0%, 100% 100%);
}
.sdlmm--triangle .sdlmm__video:hover {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.sdlmm--circle .sdlmm__video {
  clip-path: circle(35% at 50% 50%);
  -webkit-clip-path: circle(35% at 50% 50%);
}
.sdlmm--circle .sdlmm__video:hover {
  clip-path: circle(100% at 50% 50%);
  -webkit-clip-path: circle(100% at 50% 50%);
}

JavaScript

(function($) {
    $.fn.mmplayer = function(params) {
        /*
        Yes, this is a jQuery plugin. However, the insides don't use jQuery at all. 
        So, if a client didn't want to use jQuery, that's fine. we can make a non-jquery version without issue
        */
        //make sure that GUM works the same in all browsers
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        //create a custom event for custom events
        var videoTimeevt = new CustomEvent('videoTime',{
                'detail': {
                    playTime: this.currentTime
                }
            });
        /*=== THE JUICY BITS ===*/
        return this.each(function() {
            /*== INTERNAL VARIABLES==*/
            this.data = $.extend($(this).data('sdlmm'), params);
            var video,
                _this = this,
                $this = $(this);
            this.colorizing = {
                rgb: {
                    r: 1,
                    g: 1,
                    b: 1
                },
                hslToRgb: function(h, s, l) {
                    var r, g, b;
                    if (s == 0) {
                        r = g = b = l; // achromatic
                    } else {
                        function hue2rgb(p, q, t) {
                            if (t < 0) t += 1;
                            if (t > 1) t -= 1;
                            if (t < 1 / 6) return p + (q - p) * 6 * t;
                            if (t < 1 / 2) return q;
                            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
                            return p;
                        }

                        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
                        var p = 2 * l - q;
                        r = hue2rgb(p, q, h + 1 / 3);
                        g = hue2rgb(p, q, h);
                        b = hue2rgb(p, q, h - 1 / 3);
                    }
               ...