2

I am recording a video that will put myself and the xaringan slides side by side. Therefore, I would like to float the container of the slides to the right side so that I will have space to stand at the left.

Here is an example slide:

---
title: "Incremental Slides with xaringan / remark.js"
author: "Yihui Xie"
date: "2017/08/31"
output:
  xaringan::moon_reader:
    css: ["test.css", "default", "default-fonts"]
    lib_dir: libs
    nature:
      countIncrementalSlides: false
      ratio: '16:9'
---

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

# Three ways to build incremental slides

In remark.js, you may use

And here is the CSS code I tried to move the container to right:

html.remark-container, body.remark-container {
  width: 93%;
  float: right;
}

.remark-container:-webkit-full-screen {
  width: 93%;
  height: 100%;
  float: right;
}

After rending the slides, the position is what I want when it is NOT in full screen. But after enter the presentation or full screen mode, the container is centered and I do not know how to move it to the right side. Any ideas? Thanks!

And here is my session information:

R version 3.4.2 Patched (2017-10-01 r73429)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS High Sierra 10.13.1

Matrix products: default
BLAS: /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.4/Resources/lib/libRlapack.dylib

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

loaded via a namespace (and not attached):
 [1] compiler_3.4.2  backports_1.1.1 magrittr_1.5    rsconnect_0.8   rprojroot_1.2   htmltools_0.3.6 tools_3.4.2     xaringan_0.4.4 
 [9] yaml_2.1.14     Rcpp_0.12.13.2  stringi_1.1.5   rmarkdown_1.7   knitr_1.17.9    stringr_1.2.0   digest_0.6.12   evaluate_0.10.1
1
  • I ended up with using the full mode of the browser (i.e. F11 on Windows) instead of full mode of remark. Commented Dec 21, 2017 at 18:30

1 Answer 1

1

You should inspect the CSS classes when your slides is fullscreen. My guess is that the class names might be different.

I don't have time to answer your question directly, but here is an indirect answer. The two key pieces are: (1) you can embed a video through your camera using the navigator.getUserMedia() API, e.g.,

<video autoplay id="webcam" width="200" height="200" style="position:absolute;top:0;right:0;z-index:100;cursor:move;" draggable="true"></video>

<script>
(function() {
  if (/remark-presenter-mode/.test(document.body.className)) return;

  // http://www.html5rocks.com/en/tutorials/getusermedia/intro/
  navigator.getUserMedia_ = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia || navigator.msGetUserMedia;
  if (!navigator.getUserMedia_) return;

  navigator.getUserMedia_({video: true, audio: false}, function(stream) {
    var video = document.getElementById('webcam');
    video.src = window.URL.createObjectURL(stream);
  }, function(e) {});
</script>

(2) You can include this HTML fragment in xaringan slides through the includes option (after_body sub-option). Or simply copy and paste into your Rmd source document (I didn't test the latter way).

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.