Javascript 全宽响应视频网站标题，带按钮和；正文

我一直在尝试在这个网站上重新创建一些类似视频标题的视频。我也喜欢vimeo链接的快速加载时间

我整天都在做这件事。我似乎找不到HTML、JS和CSS的正确组合来实现这一点。我尝试过的每一种方法要么是全屏，要么是在两侧留下空白。此外，许多例子没有响应。请帮忙

HTML

我尝试使用的javascprit来自

谢谢！ 凯尔H

---

编辑-添加代码

如果您使用的是vimeo vid，这应该可以做到。但只有vimeo plus和pro帐户允许不带按钮的背景视频

对于Vimeo iframe中的src，包括

background=1

和

autoplay=1

。包括

“muted=1”

将允许移动设备自动播放。例如

src=”https://player.vimeo.com/video/76979871?background=1&autoplay=1&loop=1&muted=1“

根据视频高度的需要调整下面的css。我相信在这种情况下的灵丹妙药是

objectfit

    <section><div class="header-video" style="opacity: 1;">
        <iframe src="https://player.vimeo.com/video/76979871?background=1&api=1&autoplay=1&loop=1&title=0&byline=0&portrait=0&muted=1&player_id=vvimeoVid" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div></section>

.header-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    opacity: 0;
    overflow: hidden;
}
.header-video iframe {
    object-fit: cover;
    object-position: center;
    width: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    position: absolute;
    /* height based on 1920x1080 ratio */
    height: calc(100vw * 0.5625);
}

.标题视频{
位置：绝对位置；
排名：0；
左：0；
高度：100vh；
宽度：100%；
不透明度：0；
溢出：隐藏；
}
.头视频帧{
对象匹配：覆盖；
对象位置：中心；
宽度：100%；
最高：50%；
-webkit转换：translateY（-50%）；
-莫兹变换：translateY（-50%）；
-ms转换：translateY（-50%）；
-o-变换：translateY（-50%）；
转化：translateY（-50%）；
左：0；
位置：绝对位置；
/*基于1920x1080比率的高度*/
高度：计算（100vw*0.5625）；
}

如果您想包括自定义js以静音/取消静音、播放/暂停等，那么有VimeoAPI。我看到Vimeo player.js API中目前存在一个漏洞，使得视频现在很难在iOS中播放

我在使用jQueryAPI时运气更好。你可以在这里找到：

---

这真是太棒了：）不过，我觉得粘在页面底部有点麻烦。我对这个很陌生。嗯，忘了包括js。看看这个。这太棒了：）完美的解决方案如果你觉得有帮助，请将其标记为答案。谢谢<代码>对象匹配在IE或视频边缘中不起作用。不过，您可以在这里投票改变这一点：因为您正在尝试重新创建某些内容，所以您需要共享您重新创建的工作。需要为其他人提供最少的工作量，以供他们查看、构建或修复。不要指望别人从头开始为你写东西。我添加了我试图开始工作的代码。

#big-video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

    <section><div class="header-video" style="opacity: 1;">
        <iframe src="https://player.vimeo.com/video/76979871?background=1&api=1&autoplay=1&loop=1&title=0&byline=0&portrait=0&muted=1&player_id=vvimeoVid" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div></section>

.header-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    opacity: 0;
    overflow: hidden;
}
.header-video iframe {
    object-fit: cover;
    object-position: center;
    width: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    position: absolute;
    /* height based on 1920x1080 ratio */
    height: calc(100vw * 0.5625);
}