Embedding entire reveal.js presentation inside a div

Question

I want to know how I can embed an entire reveal.js presentation within the limits of a tag so that my presentation looks like presentations on slideshare.net

Thanks in advance.

Corbicula

were you able to achieve this? I am trying to do the same thing, if yes could you please let me know how did you do it? – Sandal

Answer 1

You can't do that with a div. What you describe sounds exactly like what iframes are useful for.

<iframe width="400" height="400" marginheight="0" marginwidth="0" src="/your/reveal/slideshow.html">
  Fallback text here for unsupporting browsers, of which there are scant few.
</iframe>

I've not tried doing that myself, but that's the right tool to use. Try noodling with that a bit and you should get it to do what you want.

Additional resources: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Ximenes

Answer 2

I was able to embed a deck.js slide deck within a post on my stand-alone Wordpress site using an iframe as Crell suggested. The html content for the iframe was served from a GitHub repository.

Here's the code (input using the Text [not Visual] editor in Wordpress):

**
<iframe src="https://russmcduff.github.io/festschrift/ignite/deck.js-latest/scott.html" title="deck.js in WP post" width="600" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>
**

Here's the resulting post:

Example of deck.js slides autoplaying within a Wordpress post

Perhaps the same approach will work for a reveal.js slide deck?

Banking

Answer 3

It is possible via embedded property:

Reveal.initialize({ embedded: true })

Intercom