如何调整嵌入 Shiny App 中的视频位置？

Question

我需要调整插入到 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)

Answer 1

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