https://tapcpr.org/js/custom/bootstrap.youtubepopup.min.js

1/*!
2 * Bootstrap YouTube Popup Player Plugin
3 * http://lab.abhinayrathore.com/bootstrap-youtube/
4 * https://github.com/abhinayrathore/Bootstrap-Youtube-Popup-Player-Plugin
5 */
6(function ($) {
7  var $YouTubeModal = null,
8    $YouTubeModalDialog = null,
9    $YouTubeModalTitle = null,
10    $YouTubeModalBody = null,
11    margin = 5;
12
13  //Plugin methods
14  var methods = {
15    //initialize plugin
16    init: function (options) {
17      options = $.extend({}, $.fn.YouTubeModal.defaults, options);
18
19      // initialize YouTube Player Modal
20      if ($YouTubeModal == null) {
21        $YouTubeModal = $('<div class="modal fade ' + options.cssClass + '" id="YouTubeModal" role="dialog" aria-hidden="true">');
22        var modalContent = '<div class="modal-dialog" id="YouTubeModalDialog">' +
23                              '<div class="modal-content" id="YouTubeModalContent">' +
24                                '<div class="modal-header">' +
25                                  '<h4 class="modal-title" id="YouTubeModalTitle"></h4>' +
26                                '</div>' +
27                                '<div class="modal-body" id="YouTubeModalBody" style="padding:0;"></div>' +
28                                '<div class="modal-footer">'+
29                                        '<a href="/freedom-to-marry/resources" class="btn btn-primary"><i class="fa fa-video-camera"></i> 更多精彩影音</a> '+
30                                        '<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> </div>'
31                              '</div>' +
32                            '</div>';
33        $YouTubeModal.html(modalContent).hide().appendTo('body');
34        $YouTubeModalDialog = $("#YouTubeModalDialog");
35        $YouTubeModalTitle = $("#YouTubeModalTitle");
36        $YouTubeModalBody = $("#YouTubeModalBody");
37        $YouTubeModal.modal({
38          show: false
39        }).on('hide.bs.modal', resetModalBody);
40      }
41
42      return this.each(function () {
43        var obj = $(this);
44        var data = obj.data('YouTube');
45        if (!data) { //check if event is already assigned
46          obj.data('YouTube', {
47            target: obj
48          });
49          $(obj).bind('click.YouTubeModal', function () {
50            var youtubeId = options.youtubeId;
51            if ($.trim(youtubeId) == '' && obj.is("a")) {
52              youtubeId = getYouTubeIdFromUrl(obj.attr("href"));
53            }
54            if ($.trim(youtubeId) == '' || youtubeId === false) {
55              youtubeId = obj.attr(options.idAttribute);
56            }
57            var videoTitle = $.trim(options.title);
58            if (videoTitle == '') {
59              if (options.useYouTubeTitle) setYouTubeTitle(youtubeId);
60              else videoTitle = obj.attr('title');
61            }
62            if (videoTitle) {
63              setModalTitle(videoTitle);
64            }
65
66            resizeModal(options.width);
67
68            //Setup YouTube Modal
69            var YouTubeURL = getYouTubeUrl(youtubeId, options);
70            var YouTubePlayerIframe = getYouTubePlayer(YouTubeURL, options.width, options.height);
71            setModalBody(YouTubePlayerIframe);
72            $YouTubeModal.modal('show');
73
74            return false;
75          });
76        }
77        
78        $(".close").click(function () {
79          $("#YouTubeModalDialog").modal("hide");
80        });
81        
82      });
83    },
84    destroy: function () {
85      return this.each(function () {
86        $(this).unbind(".YouTubeModal").removeData('YouTube');
87      });
88    }
89  };
90
91  function setModalTitle(title) {
92    $YouTubeModalTitle.html($.trim(title));
93  }
94
95  function setModalBody(content) {
96    $YouTubeModalBody.html(content);
97  }
98
99  function resetModalBody() {
100    setModalTitle('');
101    setModalBody('');
102  }
103
104  function resizeModal(w) {
105    $YouTubeModalDialog.css({
106      width: w + (margin * 2)
107    });
108  }
109
110  function getYouTubeUrl(youtubeId, options) {
111    return ["//www.youtube.com/embed/", youtubeId, "?rel=0&showsearch=0&autohide=", options.autohide,
112      "&autoplay=", options.autoplay, "&controls=", options.controls, "&fs=", options.fs, "&loop=", options.loop,
113      "&showinfo=", options.showinfo, "&color=", options.color, "&theme=", options.theme, "&wmode=transparent"
114    ].join('');
115  }
116
117  function getYouTubePlayer(URL, width, height) {
118    return ['<iframe title="YouTube video player" width="', width, '" height="', height, '" ',
119      'style="margin:0; padding:0; box-sizing:border-box; border:0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; margin:', (margin - 1), 'px;" ',
120      'src="', URL, '" frameborder="0" allowfullscreen seamless></iframe>'
121    ].join('');
122  }
123
124  function setYouTubeTitle(youtubeId) {
125    var url = ["https://gdata.youtube.com/feeds/api/videos/", youtubeId, "?v=2&alt=json"].join('');
126    $.ajax({
127      url: url,
128      dataType: 'jsonp',
129      cache: true,
130      success: function (data) {
131        setModalTitle(data.entry.title.$t);
132      }
133    });
134  }
135
136  function getYouTubeIdFromUrl(youtubeUrl) {
137    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
138    var match = youtubeUrl.match(regExp);
139    if (match && match[2].length == 11) {
140      return match[2];
141    } else {
142      return false;

143    }
144  }
145
146  $.fn.YouTubeModal = function (method) {
147    if (methods[method]) {
148      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
149    } else if (typeof method === 'object' || !method) {
150      return methods.init.apply(this, arguments);
151    } else {
152      $.error('Method ' + method + ' does not exist on Bootstrap.YouTubeModal');
153    }
154  };
155
156  //default configuration
157  $.fn.YouTubeModal.defaults = {
158    youtubeId: '',
159    title: '',
160    useYouTubeTitle: true,
161    idAttribute: 'rel',
162    cssClass: 'YouTubeModal',
163    width: 640,
164    height: 480,
165    autohide: 2,
166    autoplay: 1,
167    color: 'red',
168    controls: 1,
169    fs: 1,
170    loop: 0,
171    showinfo: 0,
172    theme: 'light'
173  };
174})(jQuery);