https://www.asahibeer.co.jp/enjoy/recipe/3step/cmn/js/modal-video.js

1'use strict';
2
3var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
4
5/*!
6 * modal-video Ver.1.0.0 (https://www.appleple.com)
7 * Copyright appleple | MIT License
8 *
9 */
10;(function umd(factory) {
11	'use strict';
12
13	if (typeof define === 'function' && define.amd) {
14		define(['jquery'], factory);
15	} else if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {
16		module.exports = factory(require('jquery'));
17	} else {
18		factory(jQuery);
19	}
20})(function modalVideo($) {
21
22	var defaults = {
23		channel: 'youtube',
24		youtube: {
25			autoplay: 1,
26			cc_load_policy: 1,
27			color: null,
28			controls: 1,
29			disablekb: 0,
30			enablejsapi: 0,
31			end: null,
32			fs: 1,
33			h1: null,
34			iv_load_policy: 1,
35			list: null,
36			listType: null,
37			loop: 0,
38			modestbranding: null,
39			origin: null,
40			playlist: null,
41			playsinline: null,
42			rel: 0,
43			showinfo: 1,
44			start: 0,
45			wmode: 'transparent',
46			theme: 'dark'
47		},
48		ratio: '16:9',
49		vimeo: {
50			api: false,
51			autopause: true,
52			autoplay: true,
53			byline: true,
54			callback: null,
55			color: null,
56			height: null,
57			loop: false,
58			maxheight: null,
59			maxwidth: null,
60			player_id: null,
61			portrait: true,
62			title: true,
63			width: null,
64			xhtml: false
65		},
66		allowFullScreen: true,
67		animationSpeed: 300,
68		classNames: {
69			modalVideo: 'modal-video',
70			modalVideoClose: 'modal-video-close',
71			modalVideoBody: 'modal-video-body',
72			modalVideoInner: 'modal-video-inner',
73			modalVideoIframeWrap: 'modal-video-movie-wrap',
74			modalVideoCloseBtn: 'modal-video-close-btn'
75		},
76		aria: {
77			openMessage: 'You just openned the modal video',
78			dismissBtnMessage: 'Close the modal by clicking here'
79		}
80	};
81
82	function getQueryString(obj) {
83		var url = "";
84		for (var key in obj) {
85			if (obj.hasOwnProperty(key)) {
86				if (obj[key] !== null) {
87					url += key + '=' + obj[key] + '&';
88				}
89			}
90		}
91		return url.substr(0, url.length - 1);
92	}
93
94	function getYoutubeUrl(youtube, videoId) {
95		var query = getQueryString(youtube);
96		return '//www.youtube.com/embed/' + videoId + '?' + query;
97	}
98
99	function getVimeoUrl(vimeo, videoId) {
100		var query = getQueryString(vimeo);
101		return '//player.vimeo.com/video/' + videoId + '?' + query;
102	}
103
104	function getVideoUrl(opt, videoId) {
105		if (opt.channel === 'youtube') {
106			return getYoutubeUrl(opt.youtube, videoId);
107		} else if (opt.channel === 'vimeo') {
108			return getVimeoUrl(opt.vimeo, videoId);
109		}
110	}
111
112	function getPadding(ratio) {
113		var arr = ratio.split(':');
114		var width = Number(arr[0]);
115		var height = Number(arr[1]);
116		var padding = height * 100 / width;
117		return padding + '%';
118	}
119
120	function getHtml(opt, videoId) {
121		var videoUrl = getVideoUrl(opt, videoId);
122		var padding = getPadding(opt.ratio);
123		return '\n\t\t\t\t\t<div class="' + opt.classNames.modalVideo + '" tabindex="-1" role="dialog" aria-label="' + opt.aria.openMessage + '">\n\t\t\t\t\t\t<div class="' + opt.classNames.modalVideoBody + '">\n\t\t\t\t\t\t\t<div class="' + opt.classNames.modalVideoInner + '">\n\t\t\t\t\t\t\t\t<div class="' + opt.classNames.modalVideoIframeWrap + '" style="padding-bottom:' + padding + '">\n\t\t\t\t\t\t\t\t\t<button class="' + opt.classNames.modalVideoCloseBtn + ' js-modal-video-dismiss-btn" aria-label="' + opt.aria.dismissBtnMessage + '"/>\n\t\t\t\t\t\t\t\t\t<iframe width=\'460\' height=\'230\' src="' + videoUrl + '" frameborder=\'0\' allowfullscreen=' + opt.allowFullScreen + ' tabindex="-1"/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t';
124	}
125
126	$.fn.modalVideo = function (opt) {
127		opt = $.extend({}, defaults, opt);
128		$(this).each(function () {
129			if (!$(this).data('video-id')) {
130				$(this).data('video-id', opt.videoId);
131			}
132		});
133		$(this).click(function () {
134			var $me = $(this);
135			var videoId = $me.data('video-id');
136			var html = getHtml(opt, videoId);
137			var $modal = $(html);
138			var $btn = $modal.find('.js-modal-video-dismiss-btn');
139			var speed = opt.animationSpeed;
140			$('body').append($modal);
141			$modal.focus();
142			$modal.on('click', function () {
143				var $self = $(this);
144				$self.addClass(opt.classNames.modalVideoClose);
145				$self.off('click');
146				$self.off('keydown');
147				$btn.off('click');
148				setTimeout(function () {
149					$self.remove();
150					$me.focus();
151				}, speed);
152			});
153			$btn.on('click', function () {
154				$modal.trigger('click');
155			});
156			$modal.on('keydown', function (e) {
157				if (e.which === 9) {
158					e.preventDefault();
159					if ($modal.is(':focus')) {
160						$btn.focus();
161					} else {
162						$modal.attr('aria-label', '');
163						$modal.focus();
164					}
165				}
166			});
167		});
168	};
169});