How to embed http websites in your R presentation ?
I really like using R presentations to prepare my talks. I find R Markdown easy to use, easy to share and easy to understand, even if I am far from being a programmer (very far). However some — sometimes useful — functionalities can be hard to implement for newbies like me.
I recently had to embed web content in one of my presentations but did not know about any straightforward solution to do so. Aggregating — fragmented but useful — discussions found on forums, I came to a kind of solution using <iframe>.
What is <iframe> ? I we look at developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe we learn that
The HTML <iframe> element represents a nested browsing context, effectively embedding another HTML page into the current page
This is very interesting because R presentations allow HTML functionalities. It took me time to get a satisfying result because of my lack of knowledge about HTML and CSS. The HTML part is not very complicated to use and understand. For instance, the following <iframe> will embed this rpsychologist.com/d3/NHST webpage with an option allowing to scroll on the page.
<iframe src="http://rpsychologist.com/d3/NHST/" scrolling= "yes"></iframe>However, if you want to display it properly, you will need some CSS at the beginning of your .rpres file. For instance, this will allow to centre the content and display it with a correct size. You will not be able to preview the result directly in RStudio. You will have to choose “View in Browser” in the “Presentation” tab. For more information on CSS style for <iframe>, you can have a look at www.thoughtco.com/iframes-and-css-3468669. You can copy-paste the example bellow in your .rpres file to visualise the result.
<style>
iframe {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100vw;
min-height: 100vh;
z-index: -1000;
overflow: hidden;
}</style>http in R presentation
========================================================
author: An animal
date: A day
autosize: true========================================================<iframe src="http://rpsychologist.com/d3/NHST/" scrolling= "yes"></iframe>
You can custom how the webpage is displayed by playing with the <iframe> options. One important thing is to set the width and length as viewport units (“vw” and “vh”), that is to say, relatively to the size of the visible area. It can be difficult to find the right size and I personally proceed by trials and errors to get the desired area covered.
The cool thing is that you can now embed dynamic content such as live audience polls like this:
<style>
iframe {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100vw;
min-height: 100vh;
z-index: -1000;
overflow: hidden;
}
</style>http in R presentation
========================================================
author: An animal
date: A day
autosize: true========================
<h1><p>
Please grab your phone and go to <br/>
<br/> http://bit.ly/sayyesplz
</h1>========================================================
<iframe src="http://bit.ly/sayyesplz" scrolling= "no"></iframe>========================================================
<iframe src="http://bit.ly/rightgood" scrolling= "no"></iframe>
Better solutions surely exist. For instance, the proposition described here does not work on all browsers. Besides, it only works for http but not https pages. If you know about a better way to do it, let me know in the comments !
