Deferring youtube initialization (#39)

moay · Sep 21, 2017 · 257b0ee · 257b0ee
1 parent 0791c0c
commit 257b0ee
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 11 deletions.
diff --git a/.gitattributes b/.gitattributes
diff --git a/dist/afterglow.min.js b/dist/afterglow.min.js
diff --git a/dist/afterglow.zip b/dist/afterglow.zip
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "afterglowplayer",
   "description": "An easy to integrate HTML5 video player with lightbox support.",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/sandbox/test_101.html b/sandbox/test_101.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>afterglow development sandbox</title>
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.3">
+
+	<!-- STYLES -->
+	<link rel="stylesheet" type="text/css" href="../vendor/videojs/video-js.css">
+	<link rel="stylesheet/less" type="text/css" href="../src/less/skins/afterglow-default.less">
+	<link rel="stylesheet/less" type="text/css" href="../src/less/skins/afterglow-light.less">
+	<link rel="stylesheet/less" type="text/css" href="../src/less/skins/afterglow-dark.less">
+	<link rel="stylesheet/less" type="text/css" href="../src/less/components/lightbox.less">
+
+	<!-- SCRIPTS -->
+	<script src="js/less.min.js" type="text/javascript"></script>
+	<script type="text/javascript" src="../vendor/videojs/video.js"></script>
+	<script type="text/javascript" src="../vendor/videojs/plugins/Youtube.js"></script>
+	<script type="text/javascript" src="../vendor/videojs/plugins/videojs-vimeo.js"></script>
+	<script type="text/javascript" src="../vendor/videojs/plugins/videojs.hotkeys.js"></script>
+	<script type="text/javascript" src="../dist/tmp/afterglow-bundle.js"></script>
+
+	<style>
+		body{
+			max-width:1000px;
+			margin: 0 auto;
+			padding:0 50px 50px;
+		}
+	</style>
+
+</head>
+<body>
+	<h1>This is just a sandbox for development.</h1>
+
+	<!-- LOCAL TEST -->
+	<h2>Local video, single source, with poster and bound play event</h2>
+	<a class="afterglow" href="#video1"> Test 2</a>
+	<video id="video1" width="1920" height="1080" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" preload="none" data-youtube-id="HgbHx4CY300"></video>
+	<video id="video2" class="afterglow" width="1920" height="1080" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" preload="none" src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4"></video>
+</body>
+</html>
diff --git a/vendor/videojs/plugins/Youtube.js b/vendor/videojs/plugins/Youtube.js
@@ -39,6 +39,10 @@ THE SOFTWARE. */
   var Youtube = videojs.extend(Tech, {
 
     constructor: function(options, ready) {
+      if (typeof document !== 'undefined'){
+        loadScript('https://www.youtube.com/iframe_api', apiLoaded);
+        injectCss();
+      }
       Tech.call(this, options, ready);
 
       this.setPoster(options.poster);
@@ -735,11 +739,6 @@ THE SOFTWARE. */
 
   Youtube.apiReadyQueue = [];
 
-  if (typeof document !== 'undefined'){
-    loadScript('https://www.youtube.com/iframe_api', apiLoaded);
-    injectCss();
-  }
-
   // Older versions of VJS5 doesn't have the registerTech function
   if (typeof videojs.registerTech !== 'undefined') {
     videojs.registerTech('Youtube', Youtube);