aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2017-04-27 16:39:49 +0200
committerHakim El Hattab <hakim.elhattab@gmail.com>2017-04-27 16:39:49 +0200
commitcaccf67d3a8016c5ca4a735ec2cfcb6b0720e521 (patch)
treef2d6889e1a946a9a39ee61d89bb9a60d54e5e9ee
parentb19dc7fc8020491c95f92bf22277746e28da2df9 (diff)
downloadfosdem-2018-presentation-caccf67d3a8016c5ca4a735ec2cfcb6b0720e521.tar
fosdem-2018-presentation-caccf67d3a8016c5ca4a735ec2cfcb6b0720e521.tar.gz
add for iframe backgrounds
-rw-r--r--README.md4
-rw-r--r--css/reveal.css4
-rw-r--r--css/reveal.scss4
3 files changed, 8 insertions, 4 deletions
diff --git a/README.md b/README.md
index f03ae0f..99fc651 100644
--- a/README.md
+++ b/README.md
@@ -602,9 +602,9 @@ Automatically plays a full size video behind the slide.
```
##### Iframe Backgrounds
-Embeds a web page as a background. Note that since the iframe is in the background layer, behind your slides, it is not possible to interact with the embedded page.
+Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the `data-background-interactive` attribute.
```html
-<section data-background-iframe="https://slides.com">
+<section data-background-iframe="https://slides.com" data-background-interactive>
<h2>Iframe</h2>
</section>
```
diff --git a/css/reveal.css b/css/reveal.css
index f675977..5f501b1 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -377,7 +377,9 @@ body {
opacity: 1; }
.reveal .slides > section:empty,
-.reveal .slides > section > section:empty {
+.reveal .slides > section > section:empty,
+.reveal .slides > section[data-background-interactive],
+.reveal .slides > section > section[data-background-interactive] {
pointer-events: none; }
.reveal.center,
diff --git a/css/reveal.scss b/css/reveal.scss
index fba248e..983e587 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -446,7 +446,9 @@ body {
}
.reveal .slides>section:empty,
-.reveal .slides>section>section:empty {
+.reveal .slides>section>section:empty,
+.reveal .slides>section[data-background-interactive],
+.reveal .slides>section>section[data-background-interactive] {
pointer-events: none;
}