全宽度响应视频网站标题按钮&文本

时间:2018-04-11 01:11:27

标签: javascript html css web vimeo

我一直试图在本网站上重新创建类似视频标题视频的内容。我喜欢vimeo链接的快速加载时间。

Story Brand Video Header

我整天都在这。我似乎无法找到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%;
}

我尝试使用的javascprit来自https://wordpress.org/plugins/wp-video-lightbox/

谢谢! 凯尔H

编辑 - 添加代码

1 个答案:

答案 0 :(得分:1)

如果你正在使用vimeo vid,这应该可以解决问题。但只有vimeo plus和pro帐户允许没有按钮的背景视频。

对于Vimeo iframe中的src,请添加background=1autoplay=1。包括"muted=1"将允许移动设备的自动播放。例如 src="https://player.vimeo.com/video/76979871?background=1&autoplay=1&loop=1&muted=1"

根据视频高度的需要调整下面的css。我相信这种情况下的神奇子弹是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

CodePen Example