Fixed iOS lightbox behaviour

package.json

@@ -1,7 +1,7 @@
 {
   "name": "afterglow",
   "description": "An easy to integrate HTML5 video player with lightbox support.",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "license": "MIT",
   "repository": {
     "type": "git",

src/afterglow.js

@@ -172,8 +172,17 @@ afterglow = {
 		}
 
 		// Apply youtube class
-		if(videoel.getAttribute("data-youtube-id") !== null && videoel.getAttribute("data-youtube-id") !== ""){
+		if(this.isYoutubePlayer(videoel)){
 			$dom.addClass(videoel,"vjs-youtube");
+
+			// Check for native playback
+			if(document.querySelector('video').controls){
+				$dom.addClass(videoel, "vjs-using-native-controls");
+			}
+			// Add iOS class, just if is iPad
+			if(/iPad|iPhone|iPod/.test(navigator.platform)){
+				$dom.addClass(videoel, "vjs-iOS");
+			}
 		}
 
 	},
@@ -364,32 +373,27 @@ afterglow = {
 		videoel.setAttribute("data-id", videoel.getAttribute("id"));
 		videoel.setAttribute("id","afterglow-lightbox-videoel");
 
-		// Check for native playback
-		if(document.querySelector('video').controls){
-			$dom.addClass(wrapper, 'hidden');
-
-			// Bind the closing event to closing the lightbox too
-			// This is untested and needs testing on real phones
-			addEventHandler(lb_videoel,'webkitendfullscreen',function(){
-				afterglow.closeLightbox();
-			});
-		}
-
 		document.body.appendChild(wrapper);
 
 		// initiate the player and launch it
 		afterglow.initPlayer(lb_videoel, function(){
-			if($dom.get("div.afterglow-lightbox-wrapper .vjs-youtube").length == 1){
-				// Hide the poster on youtube videos just to not make it popup
-				afterglow.getPlayer(playerid).posterImage.hide();
+
+			// Prevent autoplay for iOS, won't work anyways...
+			if(!(/iPad|iPhone|iPod/.test(navigator.platform))){
+				afterglow.getPlayer(playerid).play();
+
+				if($dom.get("div.afterglow-lightbox-wrapper .vjs-youtube").length){
+					// Hide the poster on youtube videos just to not make it popup (except for iOS)
+					afterglow.getPlayer(playerid).posterImage.hide();
+				}
+
+				// Android device, so autoplay didn't work
+				if(afterglow.getPlayer(playerid).paused()){
+					afterglow.getPlayer(playerid).posterImage.show();
+					afterglow.getPlayer(playerid).bigPlayButton.show();
+				}
 			}
-			afterglow.getPlayer(playerid).play();
 
-			// Mobile device, so autoplay didn't work
-			if(afterglow.getPlayer(playerid).paused()){
-				afterglow.getPlayer(playerid).posterImage.show();
-				afterglow.getPlayer(playerid).bigPlayButton.show();
-			}
 		});
 
 		// Add the closing button
@@ -405,7 +409,9 @@ afterglow = {
 		});
 
 		// bind the closing event
-		addEventHandler(cover,'click',function(){ afterglow.closeLightbox(); });
+		addEventHandler(cover,'click',function(){ 
+			afterglow.closeLightbox(); 
+		});
 
 		// bind the escape key
 		addEventHandler(window,'keyup',function(e){

src/videojs/skin/afterglow/vjs-afterglow.less

@@ -845,10 +845,10 @@
 		visibility: visible;
 		opacity: 1;
 	}
-	/* Hide on mobile devices. Remove when we stop using native controls
+	/* Hide on mobile devices with youtube. Remove when we stop using native controls
 	by afterglow on mobile  */
 	&.vjs-using-native-controls .vjs-big-play-button {
-		display: none;
+		display: block;
 	}
 
 	&:hover .vjs-big-play-button,
@@ -860,6 +860,15 @@
 		.transition(all 0s);
 	}
 
+	/* Show the spinner when waiting for data and seeking to a new time */
+	&.vjs-waiting .vjs-big-play-button,
+	&.vjs-seeking .vjs-big-play-button {
+		display: none;
+
+		/* only animate when showing because it can be processor heavy *///
+		.animation(spin 1.5s infinite linear);
+	}
+
 	.vjs-big-play-button:before {
 		content: @play-icon;
 		font-family: 'afterglow-icon';
@@ -1253,6 +1262,19 @@
 				}
 			}
 		}
+
+		&.vjs-using-native-controls,
+		&.vjs-iOS{
+			.vjs-big-play-button {
+				display: none;
+			}
+			.vjs-poster {
+				display: none;
+			}
+			iframe{
+				display:block;
+			}
+		}
 	}
 
 }