将视频标记设置为背景图像并匹配内容

时间：2017-06-08 03:32:32

标签： jquery css

这是我的代码：

.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实现它？

2 个答案:

答案 0 :(得分：1)

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

从视频元素中删除宽度。保留position:absolute;top:0;left:0并将overflow: hidden;提供给video-bg课程。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

Updated Fiddle

希望有所帮助：）

答案 1 :(得分：1)

您可以使用object-fit获取

更新css 

video {
  object-fit: cover;
  height:100vh;
  min-height:100%;
}
    body, html {
    margin: 0px;
    padding: 0px;
    height:100%;
    min-height:100%;
}


    body, html {
    margin: 0px;
    padding: 0px;
}

video {
  object-fit: cover;
}

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

.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;
}

.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" width="100%" height="100%">
            <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>

相关问题
最新问题