如何根据YouTube视频横竖屏方向动态调整CSS？

因为你已经明确每个视频的横竖屏方向，有两种高效方案可以实现需求：

方案一：HTML数据属性 + CSS媒体查询 #

纯CSS实现，无需额外JS，适合静态渲染场景：

1. 给视频容器添加方向标识
   渲染每个视频对应的Fancybox内容容器时，加上data-orientation属性：

   <div class="fancybox-content" data-orientation="landscape">
     <!-- YouTube嵌入代码 -->
     <iframe src="https://www.youtube.com/embed/xxx" frameborder="0"></iframe>
   </div>
   
   <div class="fancybox-content" data-orientation="portrait">
     <!-- YouTube Shorts嵌入代码 -->
     <iframe src="https://www.youtube.com/embed/yyy" frameborder="0"></iframe>
   </div>
   

2. 编写针对性CSS
   替换原CSS，用属性选择器结合媒体查询适配不同场景：

   /* 重置基础样式 */
   .fancybox-slide {
     padding: 0 !important;
   }
   
   /* 横屏视频：优先占满宽度，高度自适应不超出视口 */
   .fancybox-content[data-orientation="landscape"] {
     width: 100vw !important;
     height: auto !important;
     max-height: 100vh;
   }
   
   /* 竖屏视频默认逻辑：占满高度，宽度自适应不超出视口 */
   .fancybox-content[data-orientation="portrait"] {
     height: 100vh !important;
     width: auto !important;
     max-width: 100vw;
   }
   
   /* 移动设备竖屏时（视口宽高比≤1），强制竖屏视频填满整个屏幕 */
   @media (max-aspect-ratio: 1/1) {
     .fancybox-content[data-orientation="portrait"] {
       width: 100vw !important;
       height: 100vh !important;
     }
   }
   
   /* 让YouTube iframe填满容器 */
   .fancybox-content iframe {
     width: 100% !important;
     height: 100% !important;
     border: none;
   }
   

方案二：JavaScript动态控制（适合动态加载视频的场景） #

如果视频从数组动态渲染或通过Fancybox API调用，可利用回调函数动态添加样式类：

1. 初始化Fancybox时绑定回调
   假设你的视频数组包含方向信息：

   const videos = [
     { id: "video1", url: "https://www.youtube.com/embed/xxx", orientation: "landscape" },
     { id: "video2", url: "https://www.youtube.com/embed/yyy", orientation: "portrait" }
   ];
   
   // 绑定Fancybox
   Fancybox.bind("[data-fancybox]", {
     beforeShow: (instance, slide) => {
       // 获取当前视频的方向（根据实际逻辑调整，此处用slide索引匹配数组）
       const video = videos[slide.index];
       const contentEl = slide.$content[0];
   
       // 移除旧方向类，添加新类
       contentEl.classList.remove("video-landscape", "video-portrait");
       contentEl.classList.add(`video-${video.orientation}`);
     }
   });
   

2. 对应CSS样式

   .fancybox-slide {
     padding: 0 !important;
   }
   
   .video-landscape {
     width: 100vw !important;
     height: auto !important;
     max-height: 100vh;
   }
   
   .video-portrait {
     height: 100vh !important;
     width: auto !important;
     max-width: 100vw;
   }
   
   @media (max-aspect-ratio: 1/1) {
     .video-portrait {
       width: 100vw !important;
       height: 100vh !important;
     }
   }
   
   .fancybox-content iframe {
     width: 100% !important;
     height: 100% !important;
     border: none;
   }
   

关键注意事项 #

• 减少!important依赖：若Fancybox默认样式优先级过高，可使用更具体的选择器（如.fancybox-is-open .fancybox-content[data-orientation="landscape"]）提升优先级。
• 多设备测试：重点验证平板这类宽高比介于横竖屏之间的设备，确保视频显示正常。
• iframe适配：必须让iframe占满父容器，否则容器样式调整后视频无法同步适配。

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