我一直在尝试在本网站上重新创建类似视频标题视频的内容。我也喜欢 vimeo 链接的快速加载时间。
我整天都在做这个。我似乎无法找到 HTML、JS 和 CSS 的正确组合来让它工作。我尝试过的每一种方式要么是全屏显示,要么在两侧留下空白。此外,许多示例没有响应。请帮忙!
HTML
<section id="big-video">
<div class="video-box">
<video data-id="2" muted="" autoplay="autoplay" loop="loop">
<source src="http://player.vimeo.com/external/123432922.hd.mp4? s=dabc3899c0a02b05a3e16a02d0d81758" type="video/mp4">
<source src="http://player.vimeo.com/external/123432922.hd.mp4?s=dabc3899c0a02b05a3e16a02d0d81758.webm" type="video/webm">
</video>
</div>
</section>
CSS
#big-video {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: auto 100%;
}
我尝试使用的 javascrit 来自 https://wordpress.org/plugins/wp-video-lightbox/
谢谢! 凯尔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。我相信这种情况下的 Elixir 是 object-fit
<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);
}
如果您想包含自定义 js 以静音/取消静音、播放/暂停等。可以使用 vimeo API。我看到目前 Vimeo player.js API 中存在一个错误,这使得视频现在很难在 iOS 中播放。
我在使用 jQuery API 时运气更好。您可以在这里找到:https://github.com/jrue/Vimeo-jQuery-API
关于javascript - 带按钮和文本的全宽响应式视频网站标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49764949/