html - 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>



2 Answers: 

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

 

perhaps you already figured it out, it's seem to be recent improvement:

<section data-background-iframe="https://github.com/hakimel/reveal.js">
</section>

reference: https://github.com/hakimel/reveal.js/pull/1029

 

More Articles


android - How to prevent AlertDialog using custom theme from appearing fullscreen?

I am using a custom style for my AlertDialogs, but it is making them appear fullscreen. I've searched around, but I could only seem to find people wanting to make it fullscreen... Here is my style <style name="MyDialog" parent="AlertDialog.AppCompat"> <item name="android:background">

android - Expression of time difference

Given a number of seconds/milliseconds, what is the best method to gracefully/cleanly express this time interval in the user's language, using the Android values/strings.xml API?I am not asking for how to get the days/hours/minutes -- answers for that can be found in how to show milliseconds in days

Best iPhone/iOS framework for Presentation Apps

Which framework do you suggest for building an application to manage presentation, like an interactive and multimedia brochure?Do you think the iOS is enough?


Using Android Presentation class with a Bluetooth mouse

I am attempting to use the Presentation class for Android to display a secondary app on another display which can be navigated with the mouse; however, when I connect a Bluetooth mouse to the phone it only shows the cursor and allows for click inputs on the phone's primary display. Is there a way to

r - Include googleVis chart in ioslides RStudio

I have a following chart:library(googleVis)df = data.frame(models = c("PLAT", "LC", "APC", "CBD", "M6", "M7", "M8"), val = 1:7)Column <- gvisColumnChart(df)plot(Column)I would like to place it in ioslides in RStudio.Can anyone instruct me how to do it?

jquery - Chaining animated sequences for an infinite loop presentation

I'm coding up a presentation for display on a TV in the office reception area and need some help please.I've tried numerous StackOverflow answers to try and resolve this, but none relate particularly well to my situation. I have spent days trying to solve this and am ready to quit.Here's the main bu


apache poi - What are these fonts in a powerpoint pptx file?

I want to collect font information of a pptx with the help of Apache POI. I basically search for string typeface= in the xmlObject of a powerpoint slide.In some of my files, I can see a bunch of lines that contains the search string: <a:latin typeface="+mn-lt"/> <a

user interface - Using HTML to present stuctured data

I have a question about how to present some structured data using HTML.I have some tree-like data, which you might normally present using sections and subsections (i.e. <h1>, <h2>, etc.) and/or using nested lists (i.e. lists whose items contain lists of sub-items).An example of this data

Print Powerpoint slide with python-pptx

I've been using python-pptx to access slides (I find it much smoother than using win32 as it doesn't need to open the Powerpoint window. However, I've checked the docs but can't find any method of printing a slide. Am I missing something?Here is what I have so far:from pptx import Presentationprs =

html - CSS - Background-size: Cover is too big

When i try to use the background-size:cover property with a fixed position my image becomes too big, and cropped. I'd like it to be the same size as the original image, but i can't figure this out. I'm trying to keep the affect of the image staying in position.#wrapper { width:100%; height:580px;