$.responsiveVideo

/*global jQuery */

/**
 * $.responsiveVideo
 * by Kevin Weber
 *
 * Improve responsiveness of videos.
 * Libraries required: jQuery.
 *
 * Initiate plugin like this:
 * var options = {
 *   dataSrc: 'custom-data-src'
 *    ...
 * }
 *
 * $('video').responsiveVideo(options);
 */

(function ($) {
  'use strict';

  var pluginName = "responsiveVideo",
    pluginObject = this,
    // These settings can be overridden when initializing this plugin
    settings = {
      dataSrc: 'data-src'
    };

  /*
   * The actual plugin constructor
   */
  function Plugin(element, options) {
    pluginObject = this;

    /**
     * The element the plugin was initiated on
     * @type {jQuery}
     */
    pluginObject.$wrapper = $(element);

    // Extend default settings
    $.extend(settings, options);

    // Initiate the plugin
    pluginObject.init();
  }

  /**
   * Debounce function
   * from https://gist.github.com/kevinweber/86532b4a7f01212b65e60b3faf051550
   */
  function debounce(func, wait, immediate) {
    var timeout;

    return function () {
      var context = this,
        args = arguments,
        later,
        callNow;

      later = function () {
        timeout = null;
        if (!immediate) {
          func.apply(context, args);
        }
      };
      callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) {
        func.apply(context, args);
      }
    };
  }

  function hasVisibilityChanged() {
    return pluginObject.$wrapper.wasVisible !== pluginObject.$wrapper.isVisible;
  }

  /*
   * Load video to apply changes.
   * We test if video's visibility has changed to avoid
   * reloading the video even if we haven't reached a break point.
   */
  function loadVideo() {
    if (typeof pluginObject.$wrapper.load === 'function' && hasVisibilityChanged()) {
      pluginObject.$wrapper.load();
    }
  }

  /*
   * A video's visibility is determined by its height.
   * Set video height to "0" in CSS if you don't
   * want it to be displayed for certain screen sizes.
   */
  function isVideoVisible() {
    var isVisible;

    pluginObject.$wrapper.wasVisible = pluginObject.$wrapper.isVisible;

    if (pluginObject.$wrapper.height() > 0) {
      pluginObject.$wrapper.isVisible = true;
      isVisible = true;
    } else {
      pluginObject.$wrapper.isVisible = false;
      isVisible = false;
    }

    return isVisible;
  }

  function addSrc() {
    var $videoSources = pluginObject.$wrapper.find('source');

    $videoSources.each(function () {
      var $source = $(this),
        dataSrc = $source.attr(settings.dataSrc);

      if (dataSrc) {
        $source.attr('src', dataSrc);
      }
    });
  }

  function removeSrc() {
    var $videoSources = pluginObject.$wrapper.find('source');

    $videoSources.each(function () {
      var $source = $(this);

      $source.removeAttr('src');
    });
  }

  function updateVideo() {
    if (isVideoVisible()) {
      addSrc();
    } else {
      removeSrc();
    }

    loadVideo();
  }

  function onResize() {
    var debouncedUpdate;

    debouncedUpdate = debounce(function () {
      updateVideo();
    }, 50);

    $(window).on('resize', function () {
      debouncedUpdate();
    });
  }

  $.extend(Plugin.prototype, {
    /**
     * Initiate the plugin
     */
    init: function () {
      updateVideo();
      onResize();
    }
  });

  $.fn[pluginName] = function (options) {
    return this.each(function () {

      if (!$.data(this, "plugin_" + pluginName)) {
        $.data(this, "plugin_" + pluginName, new Plugin(this, options));
      }
    });
  };
}(jQuery));

$.responsiveVideo [HTML]

<video class="responsive video-player" width="100%" autoplay loop muted>
  <!--/* By adding the src attribute to the source element using JS, we
         ensure the video file is not loaded when it's not visible (i.e. on mobile) */-->
  <source data-src="http://videourl" type="video/mp4">
  <p>Your browser does not support HTML5 video tag.</p>
</video>