Reveal.js iframe background

Question

I want an embedded iframe to be full screen (or an adjusted percentage of the full screen) in a reveal.js presentation. This discussion implies that I can set the iframe as a background, but this returns the default background:

<section data-background="http://viz.healthmetricsandevaluation.org/fgh">
</section>

I have also tried putting the iframe in a div with class stretch, but it only takes up a percentage of the screen:

<div class = "stretch">
     <iframe width="100%" height="100%" src="http://viz.healthmetricsandevaluation.org/fgh"></iframe>
</div>

Answer 1

To answer your question about interacting with the background iframes:

Use the dev branch on reveal.js to get the data-background-iframe feature. Implement this small patch to interact with the iframes until something similar gets merged in.

function showSlide( slide ) {
    // ...

    if( background ) {
        // ...
        document.querySelector('.reveal > .backgrounds').style['z-index'] = 0;
        // ...
        if( background.hasAttribute( 'data-loaded' ) === false ) {
            // ...
            if( backgroundImage ) {
                // ...
            }
            // ...
           else if ( backgroundIframe ) {
               // ...
              document.querySelector('.reveal > .backgrounds').style['z-index'] = 1;
           }
       }
   }
}

To be clear, the two lines being added are:

document.querySelector('.reveal > .backgrounds').style['z-index'] = 0; // reset when not in iframe
document.querySelector('.reveal > .backgrounds').style['z-index'] = 1; // set when in iframe

reference: https://github.com/hakimel/reveal.js/pull/1029#issuecomment-65373274