New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fullscreen video/iframe #751

Closed
uhaveamsg opened this Issue Dec 10, 2013 · 18 comments

Comments

Projects
None yet
@uhaveamsg
Copy link

uhaveamsg commented Dec 10, 2013

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

@SR--

This comment has been minimized.

Copy link

SR-- commented Dec 10, 2013

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

This comment has been minimized.

Copy link

dok commented Jan 27, 2014

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

@hakimel

This comment has been minimized.

Copy link
Owner

hakimel commented Feb 25, 2014

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.

@vcml10

This comment has been minimized.

Copy link

vcml10 commented Feb 25, 2014

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

@hakimel

This comment has been minimized.

Copy link
Owner

hakimel commented Feb 25, 2014

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

hakimel added a commit that referenced this issue Apr 1, 2014

@smthomas

This comment has been minimized.

Copy link

smthomas commented Apr 3, 2014

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

This comment has been minimized.

Copy link

stopsatgreen commented May 6, 2014

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

This comment has been minimized.

Copy link
Owner

hakimel commented May 6, 2014

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

This comment has been minimized.

Copy link

andyfitz commented May 7, 2014

A much easier way of including video. Excellent!

@christophknoth

This comment has been minimized.

Copy link

christophknoth commented May 16, 2014

Very nice, does this work for iframes as well?

@hogarthhughes

This comment has been minimized.

Copy link

hogarthhughes commented Jun 20, 2014

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

@dgiebe

This comment has been minimized.

Copy link

dgiebe commented Jul 10, 2014

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

@tobiasstraub

This comment has been minimized.

Copy link

tobiasstraub commented Jul 24, 2014

Same here. Background video dosn't work.

@mitar

This comment has been minimized.

Copy link

mitar commented Nov 15, 2014

You should try dev branch, not master.

@laishi

This comment has been minimized.

Copy link

laishi commented Jan 31, 2015

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

This comment has been minimized.

Copy link
Owner

hakimel commented May 6, 2015

Closing. This is in master since 3.0 was released.

@amenk

This comment has been minimized.

Copy link

amenk commented Dec 4, 2016

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

This comment has been minimized.

Copy link

nevesnunes commented Jul 26, 2018

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
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment