Insert raw html iframe into RMarkdown

Publishing Your Results
1

I am making a html page with RMarkdown. It will include embedded videos in iframes. Previously, I could insert the iframe code into the Rmd, render to html and the iframe code would appear in the html as it was in the original Rmd. Trying this same thing more recently, I found the iframe code was being changed considerably in the rendering process. In particular, the src in the iframe is changed completely.

The iframe code I inserted into Rmd is this:

<iframe src="https://ntu.cloud.panopto.eu/Panopto/Pages/Embed.aspx?id=894e2520-46b3-4c7e-9666-acbc00eee050&amp;autoplay=false&amp;offerviewer=true&amp;showtitle=true&amp;showbrand=false&amp;start=0&amp;interactivity=all" height="405" width="720" style="border: 1px solid #464646;" allowfullscreen="" allow="autoplay"></iframe>

but the resulting iframe code in the html page is


<iframe src="data:text/html; charset=utf-8;charset=utf-8,%0A%0A%3C%21DOCTYPE%20html%20PUBLIC%20%22%2D%2F%2FW3C%2F%2FDTD%20XHTML%201%2E0%20Transitional%2F%2FEN%22%20%22http%3A%2F%2Fwww%2Ew3%2Eorg%2FTR%2Fxhtml1%2FDTD%2Fxhtml1%2Dtransitional%2Edtd%22%3E%0A%0A%3Chtml%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F1999%2Fxhtml%22%20%3E%0A%0A%3Chead%3E%3Ctitle%3E%0A%09HTTP%20500%20%3A%20Internal%20Server%20Error%0A%3C%2Ftitle%3E%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice%2Dwidth%2C%20initial%2Dscale%3D1%2C%20maximum%2Dscale%3D1%2C%20user%2Dscalable%3D0%3B%22%20%2F%3E%0A%20%20%20%20%3Clink%20href%3D%22%2FPanopto%2FCache%2F10%2E1%2E1%2E00002%2FStyles%2FLess%2FSite%2Ecss%22%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%20%2F%3E%0A%0A%20%20%20%20%0A%20%20%20%20%3Clink%20rel%3D%22SHORTCUT%20ICON%22%20type%3D%22image%2Fx%2Dicon%22%20href%3D%22%2FPanopto%2FCache%2F10%2E1%2E1%2E00002%2Fdefaultfavicon%2Eico%22%20%2F%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22wrapper%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22fail%22%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22message%2Dcontainer%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22screen%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22message%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%2E%2E%2F%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cimg%20src%3D%22%2FPanopto%2FCache%2F10%2E1%2E1%2E00002%2FImages%2Fpanopto%5Flogo%2Epng%22%20alt%3D%22Panopto%22%20border%3D%220%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch1%3EWe%E2%80%99re%20currently%20experiencing%20technical%20difficulties%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbr%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3EPlease%20bear%20with%20us%20while%20we%20tune%20our%20satellites%2E%20Sorry%20for%20the%20inconvenience%2E%3C%2Fp%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cform%20method%3D%22post%22%20action%3D%22Error%2FDefault%2Easpx%3Fid%3D894e2520%2D46b3%2D4c7e%2D9666%2Dacbc00eee050%26amp%3Bautoplay%3Dfalse%26amp%3Bofferviewer%3Dtrue%26amp%3Bshowtitle%3Dtrue%26amp%3Bshowbrand%3Dfalse%26amp%3Bstart%3D0%26amp%3Binteractivity%3Dall%22%20id%3D%22ctl02%22%3E%0A%3Cinput%20type%3D%22hidden%22%20name%3D%22%5F%5FVIEWSTATE%22%20id%3D%22%5F%5FVIEWSTATE%22%20value%3D%22%2FwEPDwUKMTM4NDY1Mzk1Mg9kFgICAg9kFgQCAQ8PFgIeBFRleHQFIEhUVFAgNTAwIDogSW50ZXJuYWwgU2VydmVyIEVycm9yZGQCAw8PFgIfAAUjVGhlcmUgd2FzIGFuIGludGVybmFsIHNlcnZlciBlcnJvci5kZGTZ8%2BvvafNj7P5EXnBmcWQFe53yn8AIbiDHiMFNRVw3kw%3D%3D%22%20%2F%3E%0A%0A%3Cinput%20type%3D%22hidden%22%20name%3D%22%5F%5FVIEWSTATEGENERATOR%22%20id%3D%22%5F%5FVIEWSTATEGENERATOR%22%20value%3D%2270935CD1%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22error%2Dheader%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20id%3D%22titleText%22%3EHTTP%20500%20%3A%20Internal%20Server%20Error%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22error%2Dmessage%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20id%3D%22messageLabel%22%3EThere%20was%20an%20internal%20server%20error%2E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fform%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%3C%21%2D%2D%20end%20fail%20%2D%2D%3E%0A%20%20%20%20%3C%2Fdiv%3E%3C%21%2D%2D%20end%20wrapper%20%2D%2D%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E" height="405" width="720" style="border: 1px solid #464646;" allowfullscreen allow="autoplay"></iframe>

I wondered if this might be a pandoc issue. If I do rmarkdown::render(<Rmd file>, clean = FALSE) and so save the intermediate .md file, the correct <iframe> code is there. But when I use pandoc on the command to convert that .md to .html, the resulting <iframe> code in the html is fine. Now, as I understand it, RStudio has its own built in version of pandoc, so perhaps that's doing something to the system's pandoc.

I'm using custom built RStudio 1.4 on Linux. R 4.0.3. Rmarkdown 2.5.

2 Likes
2

I just updated to RStudio 1.4 and I see the same problem with iframes. I just tried embedding an iframe in an rmarkdown document and when I open the knitted html in the Chrome browser, I just see a black screen. I urgently need to be able to do this for my lectures and it worries me that nobody from RStudio has responded to this issue for almost a week :frowning:

3

@boyan.kostadinov I too had to get lectures with iframed videos immediately. My workaround solution to this is pretty easy: I insert the iframe into the html that that Rmarkdown produces. In other words, I don't put the iframe in the Rmd file, but some place holder text like "insert iframe here" in the Rmd where I would otherwise put the iframe. Then render to html, then open the html and replace the placeholder text with the iframe. Everything works properly then.

While the workaround is fine, I still think some bug or something undocumented has happened.

I should also add that I tried the solution here, and that iframe code in the html was as described in my original post:

Maybe the amazing @yihui will know :grinning:

2 Likes
4

Thanks for the suggestion! How did you edit the html?

5

I edited it in RStudio. But any old editor (e.g. Atom etc) will do.

6

Thanks for your help! I submitted an issue request to rmarkdown at GitHub and I hope @yihui or one of his colleagues will take a look soon.

7

Hi @boyan.kostadinov

Sorry for having missed this issue.

It seems it is indeed a change from Pandoc as you guessed. Recent Pandoc version seems to now process iframe tags the same as other when using self-contained document.

You could either use self_contained: false in YAML to not have those data: tansformation, or follow Pandoc documentation and add data-external="1" attributes like this

<iframe src="https://ntu.cloud.panopto.eu/Panopto/Pages/Embed.aspx?id=894e2520-46b3-4c7e-9666-acbc00eee050&amp;autoplay=false&amp;offerviewer=true&amp;showtitle=true&amp;showbrand=false&amp;start=0&amp;interactivity=all" height="405" width="720" style="border: 1px solid #464646;" allowfullscreen="" allow="autoplay" data-external="1"></iframe>

This would prevent the transformation by Pandoc. Source of this info is here: https://pandoc.org/MANUAL.html#option--self-contained

We'll look into that closer to see when this change in Pandoc happened and why.

8 Likes
8

Thanks for the solution and for looking into this! Adding the attribute data-external="1" works!

1 Like
9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.