start work on video backgrounds #751

css/reveal.css

@@ -1344,6 +1344,17 @@ body {
 		visibility: visible !important;
 	}
 
+/* Video backgrounds */
+.reveal .slide-background video {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	max-width: none;
+	max-height: none;
+	top: 0;
+	left: 0;
+}
+
 /* Immediate transition style */
 .reveal[data-background-transition=none]>.backgrounds .slide-background,
 .reveal>.backgrounds .slide-background[data-background-transition=none] {

js/reveal.js

@@ -488,6 +488,7 @@ var Reveal = (function(){
 			background: slide.getAttribute( 'data-background' ),
 			backgroundSize: slide.getAttribute( 'data-background-size' ),
 			backgroundImage: slide.getAttribute( 'data-background-image' ),
+			backgroundVideo: slide.getAttribute( 'data-background-video' ),
 			backgroundColor: slide.getAttribute( 'data-background-color' ),
 			backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
 			backgroundPosition: slide.getAttribute( 'data-background-position' ),
@@ -507,8 +508,18 @@ var Reveal = (function(){
 			}
 		}
 
-		if( data.background || data.backgroundColor || data.backgroundImage ) {
-			element.setAttribute( 'data-background-hash', data.background + data.backgroundSize + data.backgroundImage + data.backgroundColor + data.backgroundRepeat + data.backgroundPosition + data.backgroundTransition );
+		// Create a hash for this combination of background settings.
+		// This is used to determine when two slide backgrounds are
+		// the same.
+		if( data.background || data.backgroundColor || data.backgroundImage || data.backgroundVideo ) {
+			element.setAttribute( 'data-background-hash', data.background +
+															data.backgroundSize +
+															data.backgroundImage +
+															data.backgroundVideo +
+															data.backgroundColor +
+															data.backgroundRepeat +
+															data.backgroundPosition +
+															data.backgroundTransition );
 		}
 
 		// Additional and optional background properties
@@ -519,6 +530,18 @@ var Reveal = (function(){
 		if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
 		if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
 
+		// Create video background element
+		if( data.backgroundVideo ) {
+			var video = document.createElement( 'video' );
+
+			// Support comma separated lists of video sources
+			data.backgroundVideo.split( ',' ).forEach( function( source ) {
+				video.innerHTML += '<source src="'+ source +'">';
+			} );
+
+			element.appendChild( video );
+		}
+
 		container.appendChild( element );
 
 		return element;