如何在fancybox图库中设置HTML5视频宽高比并实现全屏？

方法1：通过初始化配置强制自适应全屏 #

在绑定fancybox时，添加配置项禁用默认宽高比计算，让视频占满容器空间：

Fancybox.bind("[data-fancybox]", {
  // 禁用自动宽高比约束
  ratio: false,
  // 设置内容宽高为容器100%
  contentWidth: "100%",
  contentHeight: "100%",
  // 开启全屏模式支持，可选自动进入全屏
  fullScreen: {
    autoStart: false,
  },
  // 视频相关配置
  video: {
    autoStart: false,
    controls: true, // 保留控制栏，方便用户手动切换全屏
  }
});

方法2：自定义CSS强制视频填充容器 #

如果配置项未生效，可通过CSS强制视频元素占满fancybox内容区域：

.fancybox__content .fancybox__video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain; /* 保持视频比例且占满容器，避免变形 */
  /* 若允许拉伸填充，改用object-fit: fill; */
}

方法3：启用内置全屏按钮 #

确保工具栏显示全屏按钮，让用户可手动触发全屏：

Fancybox.bind("[data-fancybox]", {
  toolbar: ["zoom", "fullscreen", "close"], // 保留fullscreen按钮
});

以上方案可单独或组合使用，实现竖屏视频在fancybox中的全屏显示效果。

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