Html 如何在xaringan幻灯片全屏模式下更改内容位置

我正在录制一段视频，将我自己和xaringan幻灯片并排播放。因此，我想将载玻片的容器浮到右侧，这样我就有空间站在左侧

下面是一张示例幻灯片：

---
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

下面是我试图将容器向右移动的CSS代码：

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

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

在播放幻灯片后，当它不是全屏时，位置就是我想要的。但进入演示或全屏模式后，容器居中，我不知道如何将其移到右侧。有什么想法吗？谢谢

以下是我的课程信息：

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）您可以使用

navigator.getUserMedia（）

API通过摄像头嵌入视频，例如

<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>

（功能（）{
if（/remark presenter mode/.test（document.body.className））返回；
// http://www.html5rocks.com/en/tutorials/getusermedia/intro/
navigator.getUserMedia u=navigator.getUserMedia | | navigator.webkitGetUserMedia||
navigator.mozGetUserMedia | | navigator.msGetUserMedia；
如果（！navigator.getUserMedia）返回；
getUserMedia（视频：真，音频：假）函数（流）{
var video=document.getElementById（'webcam'）；
video.src=window.URL.createObjectURL（流）；
}，函数（e）{}）；

---

（2） 您可以通过

包含

选项（

在正文之后

子选项）在xaringan幻灯片中包含此HTML片段。或者简单地复制并粘贴到Rmd源文档中（我没有测试后一种方法）。

我最终使用了浏览器的完整模式（即Windows上的F11）而不是完整的评论方式。