Fullscreen video/iframe

[uhaveamsg]

Is this possible, i applied the class="stretch" but it seems to be still not taking the full width & height of the slide.

[SR--]

Same here. I figure this is by design. But, as it has been mentioned before (#440), I would really appreciate if it would be easy to show full screen (background?) video as this (alongside with full-screen images) is my primary usage. Not only that, I have hundreds of uni students and this is what stops me from using the system with them. Cheers.

---

Ah, do I correctly gather from here that full screen (background) video support is planned already?

#453 (comment)

[dok]

hey @hakimel would you be interested in a functionality like .stretch, where users can set video to full background? something like '.full-video'

[hakimel]

I think this should be piped through the existing slide background functionality. You should be able to specify video backgrounds in the same way that you can currently specify images. For example:

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

Backgrounds could also support iframes, which would enabled YouTube/Vimeo.

[ovitor]

@hakimel, this is already work or it's a work in progress? Thanks!

[hakimel]

@vitorcarvalhoml The above is just how I'd like it to work. Haven't had time to start building it out yet.

[smthomas]

I was able to get the full width and height of the slide by putting an iframe inside a div with a class of "stretch", then I set the width and height of the iframe to 100%. Something like this:

<div class="stretch">
  <iframe src="[whatever] height="100%" width="100%" />
</div>

Seems to work for what I need.

[stopsatgreen]

FWIW, I got around this by cloning the video node and inserting the clone into the document root, then removing it on slide change. Would definitely prefer to have an option for this.

[hakimel]

I've made a lot of progress on this in the dev branch. Videos can now be defined through the data-background-video attribute and will play in fullscreen. Multiple video sources can be separated by commas, leading to reveal.js creating multiple <source> elements.

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

It's still missing a few configuration options but the core is there.

[andyfitz]

A much easier way of including video. Excellent!

[christophknoth]

Very nice, does this work for iframes as well?

[hogarthhughes]

Could anyone help me with this? I've tried the data-background-video (probably incorrectly...) but just can't get it too work.

[dgiebe]

Is this solution working already? Applied your data-background-video but nothing happened.

[tobiasstraub]

Same here. Background video dosn't work.

[mitar]

You should try dev branch, not master.

[laishi]

I use

<section>
<iframe frameborder=0 width=95% height=586 marginheight=0 marginwidth=0 scrolling=no src="pages/music.html"></iframe>
</section>

give me iframe width 960 , very samll , I want width 95% in my page,how can fix it!

[hakimel]

Closing. This is in master since 3.0 was released.

[amenk]

You mentioned it is in master, but was is the way now to do an iframe as background but with controlls enabled? Can't seem to find it in the docs. data-src is mentioned to work only without being able to controll the iframe contents. And class="stretch" does not use the full screen, but only the max slide content width.

[nevesnunes]

If anyone wants background video with controls, you can apply this workaround:

(new MutationObserver(function(mutations, observer) {
    mutations.reduce(function(accumulator, current) {
        return accumulator.concat(Array.prototype.slice.call(
            current.addedNodes));
    }, []).forEach(function(el) {
        if(/video/i.test(el.tagName)) {
            el.controls = true;
        }
    });
})).observe(document.body, {
    childList: true,
    subtree: true
});