如何解决背景 Vimeo 视频的行为类似于 background-size:cover - 不是 FULL SIZE,而是在较小的容器 div
我现在已经浏览了很多关于这个主题的话题,但我能找到的只是如何在全屏上解决这个问题。那么..如何将 Vimeo 视频 iframe 嵌入到具有任意大小(不是全尺寸!)的容器中,使其行为类似于 CSS background-size:cover。所以基本上它会溢出 Y 或 X。我还想将视频放在容器中。
这是我的代码:
<figure class="video-background ">
<iframe src="https://player.vimeo.com/video/364558071?background=1&api=1&loop=1&title=0&byline=0&portrait=0&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</figure>
我的视频背景 div 具有 400 像素的固定高度和可变宽度
This answer from Oliver 展示了如何在全屏上执行此操作,但如何在较小的 div 上模拟此行为?他的解决方案如下所示:
.video-background {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.video-background iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%,-50%);
}
@media (min-aspect-ratio: 16/9) {
.video-background iframe {
/* height = 100 * (9 / 16) = 56.25 */
height: 56.25vw;
}
}
@media (max-aspect-ratio: 16/9) {
.video-background iframe {
/* width = 100 / (9 / 16) = 177.777777 */
width: 177.78vh;
}
}
希望能帮到你!谢谢!
解决方法
我不确定您在使用 iframe 时是否能够做到这一点。 vimeo (和大多数其他网站) 中视频的样式根据容器的大小计算视频的宽度和高度,以防止溢出。
如果 iframe 来自单独的域,则跨站点源中的安全更改可防止篡改 iframe 中的内容(这是必需的)。
如果您真的想这样做,您可以从您自己的域中获取视频并轻松操纵溢出。
就目前而言,您只能操作 iframe
标记,您可以将其包含在如下所示的包装器中,但由于 iframe 中的子类我不在下面,您将能够创建溢出。
.video-background {
display: flex;
height:400px;
background:#555;
}
.video-background iframe {
flex: 1;
}
<figure class="video-background ">
<iframe src="https://player.vimeo.com/video/364558071?background=1&api=1&loop=1&title=0&byline=0&portrait=0&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</figure>
嘿,我对 SO 太新,无法发表评论,所以我实际上无法要求更多说明,哈哈。我想我有一个解决方案给你。 Vimeo 有一个 API,可以使他们的视频具有响应性。使用它,您可以执行以下操作:
<div class="video">
In the div below I've changed your iframe to to include the Vimeo API script and allowed the video to be responsive.
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/364558071?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<div class="overlay">
<p>If you want to overlay text you can add it here</p>
</div>
</div>
.video {
position: absolute;
left: 0;
top: 0;
/* Change the two values below to meet your requirements */
width: 50vw;
height: 100vh;
}
.video iframe {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
}
/* If you want the overlay text style it here */
.video .overlay {
font-size: 35px;
position: absolute;
text-align: center;
z-index: 2;
left: 0;
top: 0;
width: 100%;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。