video.js

(function($)
{
    'use strict';

    var HeaderVideo = function(settings)
    {
        if (settings.element.length === 0)
        {
            return;
        }
        this.init(settings);
    };

    HeaderVideo.prototype.init = function(settings)
    {
        this.$element = $(settings.element);
        this.settings = settings;
        this.videoDetails = this.getVideoDetails();

        $(this.settings.closeTrigger).hide();
        this.setFluidContainer();
        this.bindUIActions();
    };

    HeaderVideo.prototype.bindUIActions = function()
    {
        var that = this;
        $(this.settings.playTrigger).on('click', function(e)
        {
            e.preventDefault();
            that.appendIframe();
        });
        $(this.settings.closeTrigger).on('click', function(e)
        {
            e.preventDefault();
            that.removeIframe();
        });
    };

    HeaderVideo.prototype.appendIframe = function()
    {
        var html = '<iframe id="header-video__video-element" src="' + this.videoDetails.videoURL + '?rel=0&amp;hd=1&autohide=1&showinfo=0&autoplay=1&enablejsapi=1&origin=*" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
        $(this.settings.playTrigger).fadeOut();
        $(this.settings.closeTrigger).fadeIn();
        this.$element.append(html);
    };

    HeaderVideo.prototype.removeIframe = function()
    {
        $(this.settings.playTrigger).fadeIn();
        $(this.settings.closeTrigger).fadeOut();
        this.$element.find('#header-video__video-element').remove();
    };

    HeaderVideo.prototype.setFluidContainer = function()
    {
        var element = this.$element;
        element.data('aspectRatio', this.videoDetails.videoHeight / this.videoDetails.videoWidth);

        $(window).resize(function()
        {
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();

            element.width(Math.ceil(windowWidth));
            element.height(Math.ceil(windowWidth * element.data('aspectRatio'))); //Set the videos aspect ratio, see https://css-tricks.com/fluid-width-youtube-videos/

            if (windowHeight < element.height())
            {
                element.width(Math.ceil(windowWidth));
                element.height(Math.ceil(windowHeight));
            }
        }).trigger('resize');
    };

    HeaderVideo.prototype.getVideoDetails = function()
    {
        var mediaElement = $(this.settings.media);

        return {
            videoURL: mediaElement.attr('data-video-URL'),
            teaser: mediaElement.attr('data-teaser'),
            videoHeight: mediaElement.attr('data-video-height'),
            videoWidth: mediaElement.attr('data-video-width')
        };
    };

    $(document).ready(function()
    {

        $('.header-video').each(function(i, elem)
        {
            var headerVideo = new HeaderVideo(
            {
                element: elem,
                media: '.header-video__media',
                playTrigger: '.header-video__play-trigger',
                closeTrigger: '.header-video__close-trigger'
            });
        });

    }); // End doc ready

})(jQuery);