☰

Responsive video and youtube video modal

Html5 video popup responsive and youtube video modal (jQuery and css)

  1. /*
  2.  * Author: Sławomir Netteria.NET https://netteria.net
  3.  */
  4.  // ==UserScript==
  5. // @name          Responsive video and youtube video modal
  6. // @description   Html5 video popup responsive and youtube video modal (jQuery and css)
  7. // @include       https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  8. // @resource      https://netteria.net/myscript/jquery/html5videopopup/css/videopopup.css
  9. // @version       1.0
  10. // @namespace https://greatest.deepsurf.us/users/291504
  11. // ==/UserScript==
  12. (function ($) {
  13.  
  14.     $.fn.VideoPopUp = function (options) {
  15.  
  16.         var defaults = {
  17.             backgroundColor: "#000000",
  18.             opener: "video",
  19.             maxweight: "640",
  20.             pausevideo: false,
  21.             idvideo: ""
  22.         };
  23.  
  24.         var patter = this.attr('id');
  25.  
  26.         var settings = $.extend({}, defaults, options);
  27.  
  28.         var video = document.getElementById(settings.idvideo);
  29.         function stopVideo() {
  30.             var tag = $('#' + patter + '').get(0).tagName;
  31.             if (tag == 'video') {
  32.                 video.pause();
  33.                 video.currentTime = 0;
  34.             }
  35.         }
  36.  
  37.         $('#' + patter + '').css("display", "none");
  38.         $('#' + patter + '').append('<div id="opct"></div>');
  39.         $('#opct').css("background", settings.backgroundColor);
  40.         $('#' + patter + '').css("z-index", "100001");
  41.         $('#' + patter + '').css("position", "fixed")
  42.         $('#' + patter + '').css("top", "0");
  43.         $('#' + patter + '').css("bottom", "0");
  44.         $('#' + patter + '').css("right", "0");
  45.         $('#' + patter + '').css("left", "0");
  46.         $('#' + patter + '').css("padding", "auto");
  47.         $('#' + patter + '').css("text-align", "center");
  48.         $('#' + patter + '').css("background", "none");
  49.         $('#' + patter + '').css("vertical-align", "vertical-align");
  50.         $("#videCont").css("z-index", "100002");
  51.         $('#' + patter + '').append('<div id="closer_videopopup">&otimes;</div>');
  52.         $("#" + settings.opener + "").on('click', function () {
  53.             $('#' + patter + "").show();
  54.             $('#' + settings.idvideo + '').trigger('play');
  55.  
  56.         });
  57.         $("#closer_videopopup").on('click', function () {
  58.             if (settings.pausevideo == true) {
  59.                 $('#' + settings.idvideo + '').trigger('pause');
  60.             } else {
  61.                 stopVideo();
  62.             }
  63.             $('#' + patter + "").hide();
  64.         });
  65.         return this.css({
  66.  
  67.         });
  68.     };
  69.  
  70. }(jQuery));