Skip to content
Snippets Groups Projects
Commit 6c8becc5 authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

add video and iframe backgrounds to readme

parent 16f9e95d
No related branches found
No related tags found
No related merge requests found
......@@ -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.
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment