文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在不影响视频质量的情况下将视频与CSS对齐？

问如何在不影响视频质量的情况下将视频与CSS对齐？
EN

Stack Overflow用户

提问于 2021-06-27 09:41:31

回答 1查看 43关注 0票数 0

我第一次使用ionic-react制作了一个移动应用程序，但它的CSS组件遇到了一些问题。谁能帮我弄清楚如何让这个视频覆盖整个屏幕而不影响视频的质量(所以没有拉伸)？

我目前使用的方式是:代码：

.video-background {
  background: #000;
  position: fixed;
  top: 0px;
  right: 0;
  bottom: 0px;
  left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground {
    height: 300%;
    top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground {
    width: 300%;
    left: -100%;
  }
}
@media all and (max-width: 600px) {
  .vid-info {
    width: 50%;
    padding: 0.5rem;
  }
  .vid-info h1 {
    margin-bottom: 0.3rem;
  }
}
@media all and (max-width: 500px) {
  .vid-info .acronym {
    display: none;
  }
}

图片：

html

css

reactjs

ionic-framework

javascript

回答 1

Stack Overflow用户

发布于 2021-06-27 12:09:32

使用CSS的object-fit: cover将确保视频被扩展/收缩，以适应其中一个维度，根据需要裁剪顶部和底部或侧面，以填充屏幕而不失真(但显然有必要丢失一些视频)。

(注意:不可能将此代码段作为Stackoverflow工作代码段包含在内，因为这会涉及代码段结构中的iframe，因此您需要在浏览器上尝试此操作)

<head>
<style>
.video-background {
  background: #000;
  position: fixed;
  top: 0px;
  right: 0;
  bottom: 0px;
  left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  object-fit: cover;
}
</style>
</head>
<body>
<div class="video-background">
<iframe width="560" height="315" src="https://www.youtube.com/embed/H8cBGAeEsHY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68147362

复制

相似问题

问如何在不影响视频质量的情况下将视频与CSS对齐？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在不影响视频质量的情况下将视频与CSS对齐？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在不影响视频质量的情况下将视频与CSS对齐？
EN