Media manager plugin

SDL Media manager plugin

by Frank Taylor

HTML

<figure class="video video--mediaManager">
            <!-- video player is left blank - it's solely needed for the JavaScript option -->
            <div id="video__player" data-video='{"height": "200px", "type":"iframe"}' data-video-url='{"url":"http://nationwide.dist.sdlmedia.com/vms/distribution/embed/?o=46A74ED4-23BC-4E29-9B2C-D3E1C9D338FD"}'></div>
        <!--Content about video -->
        <!--This content could come from a component in Tridion -->
        <figcaption class="video__description">
            <h3 class="video__description__title">This is a  video of some sort</h3>
            <div class="video__description__text">
                <p>this is the page and stuff</p>
            </div>
        </figcaption>

JavaScript

(function ( $ ){
    $.fn.mediamanager = function(params) {
        return this.each(function() {
            //SETUP
            var video,
                data = $.extend($(this).data('video'),$(this).data('video-url'), $(this).data('video-type'), $(this).data('video-height'), $(this).data('video-width')),
                $this = $(this);

            //DEFAULT SETTINGS
            var settings = $.extend({
            'height' : '100%',
            'width' : '100%',
            'type' : 'embed'
            }, params);            
            
            //module
            video = {
                init: function () {
                    var _this = this;
                    _this.functions.cleanUrl();
                    _this.functions.getVideo();
                    _this.bindPlayerEvents();
                },
                helpers: {
                    generateId: function () {
                        var c = 'video-',
                            d = new Date();
                        d = d.getTime();
                        $this.attr('id', c+d);
                        return c + d;
                    },
                    getId: function () {
                        var _this = video;
                        return $this.attr('id') != undefined ? $this.attr('id') : _this.helpers.generateId(); 
                    },
                    generateScriptUrl: function (url, id) {
                        return url + '&trgt=' + id
                    },
                    generateIframeUrl: function (url) {
                        return url.replace('embed')
                    },
                    setScript: function (el) {
                        var _this = video,
                            id = _this.helpers.getId(),
                            url = _this.helpers.generateScriptUrl(data.url, id);
                        $.getScript(url);
                    },
                    setIframe: function () {
                        var _this =...