Fullscreen doesn't work for presentation embedded in table

[mattwarkentin]

Hey @gadenbuie,

Any idea why the full screen functionality wouldn't work for a xaringan presentation embedded in a table? I am creating a table of presentations for the lab I belong to, and I want the HTML presentations embedded in the table, like below:

library(reactable)
library(tidyverse)
library(xaringanExtra)
library(htmltools)

data <- tribble(
  ~Date, ~Time, ~Name, ~Title, ~Link,
  "2021-07-10", "2PM ET", "Matt", "Reproducible and scalable data analysis workflows with targets", "https://mattwarkentin.github.io/targets-demo/#1"
) 

data %>%
  reactable(
    columns = list(
      Link = colDef(show = FALSE)
    ),
    details = function(i) {
      div(
        embed_xaringan(
          url = data$Link[[i]], 
          style = c("height: 400px", "width: 711px")
        ),
        style = "display: flex; justify-content: center;"
      )
    }
  )

The other buttons (e.g. change slides, share button) work, but full screen doesn't...

[gadenbuie]

You're running up against a quirk of how React handles HTML attributes. For full screen to work, the <iframe> element needs the boolean attribute allowfullscreen. In HTML5, boolean attribute values are indicated by presence or abscence of the attribute:

<!-- this iframe allows fullscreen -->
<iframe allowfullscreen></iframe>

<!-- this iframe does not -->
<iframe></iframe>

Unfortunately, React handles boolean attributes differently. For React to give you the correct answer, you need the HTML

<iframe allowfullscreen=true></iframe>

Extra unfortunately, it's almost impossible to write that kind of tag with htmltools. 😞

library(htmltools)
iframe <- tags$iframe

iframe(allowfullscreen = NA)
## <iframe allowfullscreen></iframe>

iframe(allowfullscreen = TRUE)
## <iframe allowfullscreen="TRUE"></iframe>

iframe(allowfullscreen = "true")
## <iframe allowfullscreen="true"></iframe>

iframe(allowfullscreen = HTML("true"))
## <iframe allowfullscreen="true"></iframe>

HTML("<iframe allowfullscreen=true></iframe>")
## <iframe allowfullscreen=true></iframe>

I can think of two options, but I'm not certain either will work.

1. Construct the HTML in strings. You'd need to use colDef(html = TRUE) and you'd also need to include the share again dependencies directly in the document elsewhere.
2. Construct the HTML in a JavaScript function provided to details. Again, you'd need to include the share again deps manually.

I'm going to close this issue because I don't think there's much we can do in xaringanExtra, but please do post a solution if you discover one. And also link to your page of slides, the one in the reprex looks great and I've been wanting to learn more about targets! 😉