diff options
| -rw-r--r-- | README.md | 1 | ||||
| -rw-r--r-- | css/reveal.css | 8 | ||||
| -rw-r--r-- | css/reveal.scss | 4 | ||||
| -rw-r--r-- | js/reveal.js | 1 |
4 files changed, 13 insertions, 1 deletions
@@ -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; |