jquery - 将视频标签设置为背景图片并匹配内容

Question

这是我的代码:

.video-bg-container {
    position: relative;
    z-index: 9;
}

.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*z-index: 9;*/
}

.video-bg-boxes {
    position: relative;
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    padding: 70px 10%;
    z-index: 10;
}

.video-bg-boxes .blue-box {
    color: #ffffff;
    background-color: #0091cf!important;
    padding: 30px 30px 80px 30px;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 30px;
}

阅读完整版 + 演示版:https://jsfiddle.net/lanford/aeqx6ubp/4/

我希望视频标签的作用类似于背景尺寸覆盖的背景图像:宽度始终为 100%，但高度与内部内容的高度成比例并且始终响应。有没有办法通过 jquery 或 CSS 来实现它？

Answer 1

我认为这可能对您有用。但在这种情况下，在大型设备上，视频将以全宽可见的方式正确显示。其背后的原因是在大多数情况下我们的视频元素纵横比将不同于我们的视频源纵横比。所以使用了overflow:hidden。还需要注意的一件事是在移动设备上隐藏视频，只显示背景图像。这是因为大多数移动平台不会自动播放 HTML5 视频，而是会在我们的内容顶部使用嵌入式播放按钮显示它。这不是预期的行为。

移除视频元素的宽度。保留 position:absolute;top:0;left:0 并将 overflow: hidden; 赋予 video-bg 类。

.video-module {
  margin-bottom: 50px;
}

.video-bg-container {
  position: relative;
  z-index: 9;
}

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  /*z-index: 9;*/
}

video {
   position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.video-bg-boxes {
  position: relative;
  /*position: absolute;*/
  /*top: 0;*/
  /*left: 0;*/
  /*right: 0;*/
  /*bottom: 0;*/
  padding: 70px 10%;
  z-index: 10;
}

.video-bg-boxes .blue-box {
  color: #ffffff;
  background-color: #0091cf!important;
  padding: 30px 30px 80px 30px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 30px;
}

.video-bg-boxes .blue-box strong {
  font-size: 30px;
  color: #ffffff;
  text-transform: uppercase;
}

.video-bg-boxes .blue-box:hover {
  background-color: #E4E1E0!important;
  color: #4C4145!important;
}

.video-bg-boxes .blue-box:hover strong {
  color: #0091CF!important;
}

.video-bg-boxes .blue-box a {
  text-decoration: none;
  color: #ffffff;
}

.video-bg-boxes .blue-box:hover a {
  color: #0091CF;
}

.video-bg-boxes .grey-box {
  border: none!important;
  padding: 30px 30px 80px 30px;
  background: url("https://cdn2.hubspot.net/hubfs/3372283/axon-active/img/p1/blue-arrow-ico.png");
  background-position: center 90%;
  background-repeat: no-repeat;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 30px;
  background-color: #E4E1E0;
  color: #4C4145!important;
}

.video-bg-boxes .grey-box strong {
  font-size: 30px;
  color: #0091CF;
  text-transform: uppercase;
}

.video-bg-boxes .grey-box:hover {
  background: url("https://cdn2.hubspot.net/hubfs/3372283/axon-active/img/p1/arrow-ico.png")!important;
  background-position: center 90%!important;
  background-repeat: no-repeat!important;
  background-color: #0091cf!important;
  color: #ffffff!important;
}

.video-bg-boxes .grey-box:hover strong {
  color: #ffffff!important;
}

.video-bg-boxes .grey-box a {
  text-decoration: none;
  color: #4C4145;
}

.video-bg-boxes .grey-box:hover a {
  color: #ffffff;
}

<div class="video-module">
  <div class="video-bg-container">
    <div class="video-bg">
      <video autoplay="autoplay" loop="loop" controls="controls">
            <source src="https://cdn2.hubspot.net/hubfs/3372283/axon-active/img/p1/VerseQuence%20-%20Wilt%20(VOEZ%20Official%20Soundtrack)%20-%20YouTube.mp4?t=1496825800724" type="video/mp4">
      </video>
    </div>

    <div class="video-bg-boxes">
      <div class="blue-box">
        <div style="text-align: center;"><strong>Title</strong></div>
        <div style="text-align: center;">&nbsp;</div>
        <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum enim eu finibus tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget neque scelerisque, molestie turpis sed,
          tristique turpis. Proin placerat pretium libero, at pellentesque lorem condimentum eu.</div>
      </div>

      <div class="blue-box">
        <div style="text-align: center;"><strong>Title</strong></div>
        <div style="text-align: center;">&nbsp;</div>
        <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum enim eu finibus tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget neque scelerisque, molestie turpis sed,
          tristique turpis. Proin placerat pretium libero, at pellentesque lorem condimentum eu.</div>
      </div>

      <div class="blue-box">
        <div style="text-align: center;"><strong>Title</strong></div>
        <div style="text-align: center;">&nbsp;</div>
        <div style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum enim eu finibus tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget neque scelerisque, molestie turpis sed,
          tristique turpis. Proin placerat pretium libero, at pellentesque lorem condimentum eu.</div>
      </div>
    </div>
  </div>

Updated Fiddle

希望对您有所帮助:)