prevent autoplaying backgrounds from playing if slide is hidden

js/reveal.js

@@ -3060,7 +3060,16 @@
 				// Iframes
 				else if( backgroundIframe ) {
 					var iframe = document.createElement( 'iframe' );
+
+					// Only load autoplaying content when the slide is shown to
+					// avoid having it play in the background
+					if( /autoplay=(1|true|yes)/gi.test( backgroundIframe ) ) {
+						iframe.setAttribute( 'data-src', backgroundIframe );
+					}
+					else {
 						iframe.setAttribute( 'src', backgroundIframe );
+					}
+
 					iframe.style.width  = '100%';
 					iframe.style.height = '100%';
 					iframe.style.maxHeight = '100%';
@@ -3196,20 +3205,12 @@
 
 				if( autoplay && typeof el.play === 'function' ) {
 
-					var _startVideo = function() {
-						// Only start playback if the containing slide is still visible
-						if( !!closestParent( el, '.present' ) ) {
-							el.currentTime = 0;
-							el.play();
-						}
-						el.removeEventListener( 'loadeddata', _startVideo );
-					};
-
 					if( el.readyState > 1 ) {
-						_startVideo();
+						startEmbeddedMedia( { target: el } );
 					}
 					else {
-						el.addEventListener( 'loadeddata', _startVideo );
+						el.removeEventListener( 'loadeddata', startEmbeddedMedia ); // remove first to avoid dupes
+						el.addEventListener( 'loadeddata', startEmbeddedMedia );
 					}
 
 				}
@@ -3241,11 +3242,31 @@
 
 	}
 
+	/**
+	 * Starts playing an embedded video/audio element after
+	 * it has finished loading.
+	 *
+	 * @param {object} event
+	 */
+	function startEmbeddedMedia( event ) {
+
+		var isAttachedToDOM = !!closestParent( event.target, 'html' ),
+			isVisible  		= !!closestParent( event.target, '.present' );
+
+		if( isAttachedToDOM && isVisible ) {
+			event.target.currentTime = 0;
+			event.target.play();
+		}
+
+		event.target.removeEventListener( 'loadeddata', startEmbeddedMedia );
+
+	}
+
 	/**
 	 * "Starts" the content of an embedded iframe using the
 	 * postMessage API.
 	 *
-	 * @param {object} event - postMessage API event
+	 * @param {object} event
 	 */
 	function startEmbeddedIframe( event ) {
 
@@ -3253,6 +3274,11 @@
 
 		if( iframe && iframe.contentWindow ) {
 
+			var isAttachedToDOM = !!closestParent( event.target, 'html' ),
+				isVisible  		= !!closestParent( event.target, '.present' );
+
+			if( isAttachedToDOM && isVisible ) {
+
 				var autoplay = iframe.hasAttribute( 'data-autoplay' ) || !!closestParent( iframe, '.slide-background' );
 
 				// YouTube postMessage API
@@ -3272,6 +3298,8 @@
 
 		}
 
+	}
+
 	/**
 	 * Stop playback of any embedded content inside of
 	 * the targeted slide.