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

问题原因 #

你的代码存在两个核心问题导致视频覆盖文本：

• 绿色区块设置了position: absolute，使其脱离正常文档流，后续的文本元素不会为它预留空间，直接排在了绿色区块原本的位置下方
• 绿色区块固定高度只有80px，但嵌入的iframe高度有315px，超出的视频部分就会覆盖到下方文本

解决代码 #

library(shiny)
library(shinythemes)

ui <- shiny::navbarPage(theme = shinytheme("flatly"),
                        title="Test", collapsible = TRUE,
                        
                        tabPanel("",
                                 # 绿色区块样式调整
                                 div(
                                   style = 
                                     "padding: 20px 0; background-color: #02BE7F; width: 100%; text-align:center;",
                                   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)
                                 ),
                                 
                                 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)

修改说明 #

1. 移除了绿色区块的position: absolute属性，让它回归正常文档流，后续元素会自动排在它的下方
2. 去掉了不合理的固定高度height:80px，改用padding:20px 0控制视频和绿色区块边缘的上下间距，让绿色区块高度自动适配视频高度
3. 把原本错位的text-align:center配置移到了绿色区块的样式里，保证视频在绿色区块内居中显示

修改后视频会完全显示在绿色区块内部，文本会自动排在视频下方，不会出现覆盖问题。

内容的提问来源于stack exchange，提问作者user16774617