dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

works with video, defaults to (same as for images)

This commit is contained in:
Hakim El Hattab 2017-01-18 10:43:29 +01:00
parent 84090b882f
commit 941b86b6c3
4 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -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 | | 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-loop | false | Flags if the video should play repeatedly. |
| data-background-video-muted | false | Flags if the audio should be muted. | | 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 ```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> <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>

8
css/reveal.css
View File

@ -865,7 +865,13 @@ body {
max-width: none; max-width: none;
max-height: none; max-height: none;
top: 0; 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 */ /* Immediate transition style */
.reveal[data-background-transition=none] > .backgrounds .slide-background, .reveal[data-background-transition=none] > .backgrounds .slide-background,

4
css/reveal.scss
View File

@ -898,7 +898,11 @@ body {
max-height: none; max-height: none;
top: 0; top: 0;
left: 0; left: 0;
object-fit: cover;
} }
.reveal .slide-background[data-background-size="contain"] video {
object-fit: contain;
}
/* Immediate transition style */ /* Immediate transition style */
.reveal[data-background-transition=none]>.backgrounds .slide-background, .reveal[data-background-transition=none]>.backgrounds .slide-background,

1
js/reveal.js
View File

@ -884,6 +884,7 @@
// Additional and optional background properties // Additional and optional background properties
if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize; 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.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat; if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition; if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;