Video support improvements

[obilodeau]

Made several improvements to the support and documentation around videos. Fixes #71.

• background videos on individual slides is supported (w/ shorthand options)
• videos by default will use a saner size ([.stretch])
• everything is documented

The PR is larger than it should because I branched it from data-background-rework and rebased it from master before pushing. Once #52 is merged, I'll rebase again on master and reviewing should be a lot more straightforward.

Task list:

• merge PR data-background attributes rework #52
• Try to find another solution than .stretch class to make video large (100% or cover/contain sizes?)
• issue: inline video options="autoplay" makes the video start at prefetch time which is too soon
• re-wrap documentation to one sentence per line

[mojavelinux]

Great work!

videos by default will use a saner size ([.stretch])

I'd prefer to stick to the terminology from CSS where possible. CSS offers two sizing keywords, "contain" and "cover". They both give you ways to fit the object to the canvas. I think we should use those names instead (in fact, it might even be better to use CSS rules instead of width and height attributes).

[obilodeau]

I haven't made up the name. The .stretch class is provided by reveal.js and is applied via javascript to the HTML tag with it.

That said, you are right, we should try to have a CSS solution instead.

[obilodeau]

Added task:

• issue: inline video options="autoplay" makes the video start at prefetch time which is too soon

[obilodeau]

Fixed video options=autoplay.

• Doesn't work on vimeo videos. This is an upstream issue.
• I tried adding data-autoplay to a background video section but it didn't show up in the HTML... Needs further investigation.

[mojavelinux]

I wasn't aware Reveal.js provided the stretch class. In that case, we do want to be able to provide access to all underlying features, so 👍 to supporting both ways of expressing it.

[obilodeau]

• Rebased on master (now that data-background attributes rework #52 is in). Sorry for the force push :(
• Added doc re-wrap task

[obilodeau]

I have tried several CSS instructions and I wasn't able to achieve the same result as what revealjs' stretch class does on youtube iframes. I tried several combinations of min-height, height and positioning things and nothing worked. However I have to admit I'm not that skilled with CSS...

@mojavelinux any idea what should be done to avoid revealjs' stretch class here? For context, that solution relies on javascript to alter the DOM to specify the height and width (in pixels) to the div containing the iframe.

Other than that, the stretch class is applied transparently for the user. We don't introduce a keyword. So if we don't find a CSS solution, I think this should go in as-is.