css 使用Vimeo作为视频背景

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 使用Vimeo作为视频背景相关的知识,希望对你有一定的参考价值。

.bgVideo-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.bgVideo-wrapper iframe {
  width: 100vw;
  height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

以上是关于css 使用Vimeo作为视频背景的主要内容,如果未能解决你的问题,请参考以下文章

html 嵌入Vimeo视频作为背景

使用自定义字段从 Youtube 或 Vimeo 嵌入背景视频

css 使用CSS响应YouTube和Vimeo视频

全角 vimeo 包装背景

css 强制响应YouTube和Vimeo剪辑 - 适用于上传自己视频的客户

css 强制响应YouTube和Vimeo剪辑 - 适用于上传自己视频的客户