add <video /> ability

ashleydw · Aug 23, 2016 · 57a2d4a · 57a2d4a
1 parent f70e4b0
commit 57a2d4a
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 11 deletions.
diff --git a/dist/ekko-lightbox.js b/dist/ekko-lightbox.js
@@ -280,7 +280,7 @@ var Lightbox = (function ($) {
 						this._showInstagramVideo(this._getInstagramId(currentRemote), $toUse);
 						break;
 					case 'video':
-						this._showVideoIframe(currentRemote, $toUse);
+						this._showHtml5Video(currentRemote, $toUse);
 						break;
 					default:
 						// url
@@ -375,13 +375,14 @@ var Lightbox = (function ($) {
 				var id = this._getYoutubeId(remote);
 				var query = remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')) : '';
 				var width = this._$element.data('width') || 560;
-				return this._showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1' + query, width, width / (560 / 315), $containerForElement);
+				var height = this._$element.data('height') || width / (560 / 315);
+				return this._showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1' + query, width, height, $containerForElement);
 			}
 		}, {
 			key: '_showVimeoVideo',
 			value: function _showVimeoVideo(id, $containerForElement) {
-				var width = 560;
-				var height = width / (500 / 281); // aspect ratio
+				var width = 500;
+				var height = this._$element.data('height') || width / (560 / 315);
 				return this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement);
 			}
 		}, {
@@ -411,6 +412,19 @@ var Lightbox = (function ($) {
 				this._toggleLoading(false);
 				return this;
 			}
+		}, {
+			key: '_showHtml5Video',
+			value: function _showHtml5Video(url, $containerForElement) {
+				// should be used for videos only. for remote content use loadRemoteContent (data-type=url)
+				var width = this._$element.data('width') || 560;
+				var height = this._$element.data('height') || width / (560 / 315);
+				$containerForElement.html('<div class="embed-responsive embed-responsive-16by9"><video width="' + width + '" height="' + height + '" src="' + url + '" preload="auto" autoplay controls class="embed-responsive-item"></video></div>');
+				this._resize(width, height);
+				this._config.onContentLoaded.call(this);
+				if (this._$modalArrows) this._$modalArrows.css('display', 'none'); //hide the arrows when showing video
+				this._toggleLoading(false);
+				return this;
+			}
 		}, {
 			key: '_loadRemoteContent',
 			value: function _loadRemoteContent(url, $containerForElement) {

diff --git a/dist/ekko-lightbox.js.map b/dist/ekko-lightbox.js.map
diff --git a/dist/ekko-lightbox.min.js b/dist/ekko-lightbox.min.js
diff --git a/dist/ekko-lightbox.min.js.map b/dist/ekko-lightbox.min.js.map
diff --git a/ekko-lightbox.js b/ekko-lightbox.js
@@ -268,7 +268,7 @@ const Lightbox = (($) => {
 					this._showInstagramVideo(this._getInstagramId(currentRemote), $toUse);
 					break;
 				case 'video':
-					this._showVideoIframe(currentRemote, $toUse);
+					this._showHtml5Video(currentRemote, $toUse);
 					break;
 				default: // url
 					this._loadRemoteContent(currentRemote, $toUse);
@@ -360,17 +360,18 @@ const Lightbox = (($) => {
 			let id = this._getYoutubeId(remote)
 			let query = remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')) : ''
 			let width = this._$element.data('width') || 560
+			let height = this._$element.data('height') ||  width / ( 560/315 )
 			return this._showVideoIframe(
 				`//www.youtube.com/embed/${id}?badge=0&autoplay=1&html5=1${query}`,
 				width,
-				width / ( 560/315 ),
+				height,
 				$containerForElement
 			);
 		}
 
 		_showVimeoVideo(id, $containerForElement) {
-			let width = 560
-			let height = width / ( 500/281 ) // aspect ratio
+			let width = 500
+			let height = this._$element.data('height') ||  width / ( 560/315 )
 			return this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement)
 		}
 
@@ -399,6 +400,18 @@ const Lightbox = (($) => {
 			return this;
 		}
 
+		_showHtml5Video(url, $containerForElement) { // should be used for videos only. for remote content use loadRemoteContent (data-type=url)
+			let width = this._$element.data('width') || 560
+			let height = this._$element.data('height') ||  width / ( 560/315 )
+			$containerForElement.html(`<div class="embed-responsive embed-responsive-16by9"><video width="${width}" height="${height}" src="${url}" preload="auto" autoplay controls class="embed-responsive-item"></video></div>`);
+			this._resize(width, height);
+			this._config.onContentLoaded.call(this);
+			if (this._$modalArrows)
+				this._$modalArrows.css('display', 'none'); //hide the arrows when showing video
+			this._toggleLoading(false);
+			return this;
+		}
+
 		_loadRemoteContent(url, $containerForElement) {
 			let width = this._$element.data('width') || 560;
 			let height = this._$element.data('height') || 560;