aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2014-10-17 09:02:07 +0200
committerHakim El Hattab <hakim.elhattab@gmail.com>2014-10-17 09:02:07 +0200
commit6c8becc51b9cc1ef5078af0a92ea5161244458eb (patch)
treec77aa73a8515d1ef27a8540b956861b58c107a03
parent16f9e95d87b1a5cede29490d9a1822fce5769ffe (diff)
downloadfosdem-2018-presentation-6c8becc51b9cc1ef5078af0a92ea5161244458eb.tar
fosdem-2018-presentation-6c8becc51b9cc1ef5078af0a92ea5161244458eb.tar.gz
add video and iframe backgrounds to readme
-rw-r--r--README.md8
1 files changed, 7 insertions, 1 deletions
diff --git a/README.md b/README.md
index b2bab3d..abc059f 100644
--- a/README.md
+++ b/README.md
@@ -385,7 +385,7 @@ Reveal.addEventListener( 'somestate', function() {
### Slide Backgrounds
-Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page background colors or images by applying a ```data-background``` attribute to your ```<section>``` elements. Below are a few examples.
+Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a ```data-background``` attribute to your ```<section>``` elements. Four different types of backgrounds are supported: color, image, video and iframe. Below are a few examples.
```html
<section data-background="#ff0000">
@@ -397,6 +397,12 @@ Slides are contained within a limited portion of the screen by default to allow
<section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
<h2>This background image will be sized to 100px and repeated.</h2>
</section>
+<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">
+ <h2>Video. Multiple sources can be defined using a comma separated list.</h2>
+</section>
+<section data-background-iframe="https://slides.com">
+ <h2>Embeds a web page as a background. Note that the page won't be interactive.</h2>
+</section>
```
Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'slide'``` to the ```Reveal.initialize()``` call. Alternatively you can set ```data-background-transition``` on any section with a background to override that specific transition.