xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add for iframe backgrounds

Browse Source
This commit is contained in:
Hakim El Hattab 2017-04-27 16:39:49 +02:00
parent b19dc7fc80
commit caccf67d3a
3 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -602,9 +602,9 @@ Automatically plays a full size video behind the slide.
``` ```
##### Iframe Backgrounds ##### 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 ```html
<section data-background-iframe="https://slides.com"> <section data-background-iframe="https://slides.com" data-background-interactive>
<h2>Iframe</h2> <h2>Iframe</h2>
</section> </section>
``` ```

4
css/reveal.css
View File

@ -377,7 +377,9 @@ body {
opacity: 1; } opacity: 1; }
.reveal .slides > section:empty, .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; } pointer-events: none; }
.reveal.center, .reveal.center,

4
css/reveal.scss
View File

@ -446,7 +446,9 @@ body {
} }
.reveal .slides>section:empty, .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; pointer-events: none;
} }