fullscreen video or image

[doso]

Hallo could you please help me to use a fullscreen image or youtube video as background? it seems not working properly with this beautiful plugin and im not so deep inside html5 ;( thanks a lot!

[jonlow]

You can apply a background image to the body tag. You can also change this per slide using the data-set attribute on a slide. Check this out for more info http://www.raymondcamden.com/index.cfm/2012/7/23/Adding-a-background-image-to-a-revealjs-presentation

I haven't attempted a fullscreen background video, but you would definitely have to position this absolute with css, and use js to position the video depending on the size of the screen.

[hakimel]

Thanks for answering, @jonlow

[amitkot]

Can this effect be achieved on a per-slide basis when using markdown for the presentation's contents?

[d4tocchini]

any non-hacky solutions for full-screen video... the positioning issue is really annoying

[tdikun]

I second @d4tocchini on this––really need a fullscreen video solution.

[SR--]

+1 for background video. or is there a recommended way of doing that?

[astorije]

Check this out for more info http://www.raymondcamden.com/index.cfm/2012/7/23/Adding-a-background-image-to-a-revealjs-presentation

This is now a 404 😢
@jonlow, do you happen to have an alternative link or snippet?

[egrosclaude]

seems to be https://www.raymondcamden.com/2012/07/23/Adding-a-background-image-to-a-revealjs-presentation

[astorije]

I ended up successfully using data-background="img/my-image.jpg" by the way. I haven't tried with other types of media but this worked well.

[divan]

data-background doesn't work with videos, but data-background-video does.

<section data-background-video="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" 
              data-background-color="#000">
</section>