From 941b86b6c390bf91eeb6b47f12ff8bf830e28b0a Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Wed, 18 Jan 2017 10:43:29 +0100
Subject: works with video, defaults to (same as for images)
---
README.md | 1 +
css/reveal.css | 8 +++++++-
css/reveal.scss | 4 ++++
js/reveal.js | 1 +
4 files changed, 13 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 8878842..54b065b 100644
--- a/README.md
+++ b/README.md
@@ -578,6 +578,7 @@ Automatically plays a full size video behind the slide.
| data-background-video | | A single video source, or a comma separated list of video sources. |
| data-background-video-loop | false | Flags if the video should play repeatedly. |
| data-background-video-muted | false | Flags if the audio should be muted. |
+| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. |
```html
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop data-background-video-muted>
diff --git a/css/reveal.css b/css/reveal.css
index 430dcde..18bb25c 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -865,7 +865,13 @@ body {
max-width: none;
max-height: none;
top: 0;
- left: 0; }
+ left: 0;
+ -o-object-fit: cover;
+ object-fit: cover; }
+
+.reveal .slide-background[data-background-size="contain"] video {
+ -o-object-fit: contain;
+ object-fit: contain; }
/* Immediate transition style */
.reveal[data-background-transition=none] > .backgrounds .slide-background,
diff --git a/css/reveal.scss b/css/reveal.scss
index 22fb3fe..68ff56f 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -898,7 +898,11 @@ body {
max-height: none;
top: 0;
left: 0;
+ object-fit: cover;
}
+ .reveal .slide-background[data-background-size="contain"] video {
+ object-fit: contain;
+ }
/* Immediate transition style */
.reveal[data-background-transition=none]>.backgrounds .slide-background,
diff --git a/js/reveal.js b/js/reveal.js
index 7f4783e..a59916f 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -884,6 +884,7 @@
// Additional and optional background properties
if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
+ if( data.backgroundSize ) element.setAttribute( 'data-background-size', data.backgroundSize );
if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
--
cgit v1.2.3