works with video, defaults to (same as for images)
This commit is contained in:
parent
84090b882f
commit
941b86b6c3
|
@ -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>
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -898,6 +898,10 @@ 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 */
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue