【问题标题】:How can I adjust a video position embedded in a Shiny App?如何调整嵌入 Shiny App 中的视频位置?
【发布时间】:2021-11-02 00:51:53
【问题描述】:

我需要调整插入到 Shiny App 中的视频。如您所见,视频覆盖了文本。但是,我希望视频位于绿色部分,文本位于视频下方。你能帮帮我吗?

非常感谢!

我使用下面的代码:

library(shiny)
library(shinythemes)

ui <- shiny::navbarPage(theme = shinytheme("flatly"),
                        title="Test", collapsible = TRUE,
                        
                        tabPanel("",
                                 
                                 div(
                                   style = 
                                     "height: 80px; background-color: #02BE7F; width: 100%; position: absolute; right:0;",
                                   tags$iframe(width="560", height="315", src="https://www.youtube.com/embed/T1-k7VYwsHg", 
                                               frameborder="0", allow="accelerometer; autoplay; encrypted-media; gyroscope; 
                                               picture-in-picture", allowfullscreen=NA)
                                 ),
                                      style="text-align:center"),
                        
                                   hr(),
                                   br(),
                                   div(
                                     style = "width: 70%; margin: auto;",
                                     h2(HTML("Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"), 
                                        style="text-align:justify")),
                                   tags$style(".navbar {margin-bottom: 0;}")
                                 )
                                 
               



server <- function(input, output,session) {
  
}

shinyApp(ui = ui, server = server)

【问题讨论】:

    标签: css r shiny


    【解决方案1】:

    由于视频 iframe 的高度为 315,请将绿色 div 的高度设置为 315px,并将 position: absolute 替换为 position: relative

    【讨论】:

      猜你喜欢
      • 2018-05-25
      • 1970-01-01
      • 2018-05-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-02-25
      • 2017-08-18
      • 1970-01-01
      相关资源
      最近更新 更多