Xaringan: Video doesn't work for me

[lukeholman]

Hi there,

According to the tutorial, inserting a video is as easy as pasting in a YouTube or Vimeo link. But for me it doesn't work - I just get a blue box with a question mark where the video should be. I commented the Markdown so it displays properly here (maybe there is a better way?)

Not sure this is a bug, or if I am doing it wrong, but if it's the latter the Tutorial could be a bit clearer.

Thanks!

# ---
# title: "Video test"
# output:
#   xaringan::moon_reader:
#     lib_dir: libs
#     nature:
#       highlightStyle: github
#       highlightLines: true
#      countIncrementalSlides: false
# ---
#   
#   
# ```{r setup, include=FALSE}
# options(htmltools.dir.version = FALSE)
# ```
# 
# ![](https://www.youtube.com/watch?v=8lXdyD2Yzls){width="560" height="315"}
# ---

[mschilli87]

@lukeholman:
The tutorial you reference is for bookdown and not xaringan.
While they both use markdown for authoring and offer HTML as output, the way they do so is different:
xaringan uses remark.js while bookdown uses pandoc. Everything that extend markdown over the very basic formatting might be implemented one way in one of the frameworks and another or not at all in the other. As long as you convert to HTML in the end, you should be able to use plain HTML to embed the video though:

<video src="[url]">[alt]</video>

---

edit: Since it might not be trivial to get a direct link to the actual video on youtube, you can also embed the video via an iframe:

````

title: "Video test"
output:
xaringan::moon_reader:
lib_dir: libs
nature:
highlightStyle: github
highlightLines: true

countIncrementalSlides: false

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)

<iframe width="560" height="315" src="https://www.youtube.com/embed/8lXdyD2Yzls?controls=0&amp;start=2" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
---

````
---
>  I commented the Markdown so it displays properly here (maybe there is a better way?)

[Just use more backticks](https://yihui.name/en/2017/05/four-backticks-github):

`````
````
```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)

````
`````
:wink:

[zhouyisu]

+1 @mschilli87 , just use the embed iframe code generated by youtube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/8lXdyD2Yzls" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[lukeholman]

Thanks so much! That's got it. All the best!

[yihui]

I want to add a note that the tutorial you mentioned is only for the learnr package. The syntax won't (at least is unlikely to) work in other packages.

[gulinan]

Hi there,

I want to embed one of R Markdown videos on Vimeo into my xaringan presentation with the following code:

The video is a 1-minute long and never loads. If I change source address to a YouTube video, then the video plays within the presentation.

I would appreciate any help.

Thanks a lot!..

[cderv]

Hi @gulinan,

Can you try adding the data-external="1" attributes ?

<iframe width="669" height="502" src="https://player.vimeo.com/video/178485416" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen data-external="1"></iframe>

This will prevent Pandoc to make this iframe self contained. This means the document would need to have internet access to read this video.
Since recent Pandoc version, all html tag with a src= attributes will encoded using Data URI to be self-contained. Sometimes it does not work well with some content. You may have a recent Pandoc version if you updated the RStudio IDE to 1.4.

Doing this works for me with your link. If it does not for you, please share a full exemple and ask on a Q&A website like community.rstudio.com if you are not sure this is a bug in a Package but rather wants to have advice on how to do.

Thanks!

[gulinan]

Hi @cderv,

Thanks for your prompt reply. Unfortunately, adding the data-external="1" attribute did not work out. As I said earlier, YouTube videos work within the presentation, but not Vimeo videos. As you suggested, I will try out other venues to look for suggestion!..

Thanks a lot!..

[cderv]

It is working for me. When I try with the vimeo url you provided, I correctly get the video to play.
So having a full reproducible example with the context will help. I'll lookout for your question on https://community.rstudio.com

Thanks!

[gulinan]

Hi @cderv,

I got the problem now. When I render .Rmd file, you know a new window pops up as a .html file. The embed video here does not work. But when I open the .html file in web browser, it works fine. Thanks a lot for your direction.

[cderv]

Oh thanks for the precision, this is an IDE weird behavior then. As I don't have a reproducible example, I can't look into it. But in that pop up html window, you can open the inspector and look in the console.
I believe, this is also an issue that you could open in the RStudio IDE if this happens with last version of the DE.

[gulinan]

I am using the most recent version of RStudio IDE and this happens. As you said it turns out to be an issue of RStudio IDE rather than xaringan package. I hope to report an issue on this on R Community soon. Thanks a lot many times!..