xaringan 슬라이드의 전체 화면 모드에서 내용 위치를 변경하는 방법

Question

나 자신과 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 

Answer 1

당신 슬라이드는 전체 화면 일 때 inspect the CSS classes해야 :

그리고 여기 내 세션 정보입니다. 제 생각 엔 클래스 이름이 다를 수 있습니다.

직접 질문에 답변 할 시간이 없지만 here is an indirect answer입니다. 두 가지 핵심은 다음과 같습니다합니다 (includes 옵션을 통해 슬라이드 (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> 

(2) 당신은 xaringan이 HTML 조각을 포함 할 수 있습니다 after_body 하위 옵션). 또는 Rmd 소스 문서에 복사하여 붙여 넣기 만하면됩니다 (필자는 후자의 방법을 테스트하지 않았습니다).