Question

我需要添加全屏视频作为背景，但在主页上的html div部分中。 This website有很棒的条纹视频。我非常喜欢那个视频。如何在视频中添加此类效果注意：我有web-m格式的视频文件。

Answer 1

视频背景，将您的内容放入容器中。 https://jsfiddle.net/ashwinshenoy/rh7n5d0g/1/

希望这能帮助哥们！

<div class="video_div">
    <video class="video is-playing" autoplay="" muted="" loop="" poster="assets/video/thumb.jpg">
       <source src="http://ak3.picdn.net/shutterstock/videos/5949803/preview/stock-footage-little-children-playing-football-at-school-k.mp4" type="video/mp4">
    </video><!--video tag end-->
    <div class="video-overlay" style="background-image: url(&quot;https://d3k5xyayaartr5.cloudfront.net/_assets/pattern-overlays/patterns/black-dots.png&quot;);"></div>
    <div class="container">
      <!--your content here-->
    </div><!--container end-->
</div><!--video_div end-->

<style>
  // Video Div
  .video_div {
     overflow: hidden;
     padding: 230px 0 0;
     position: relative;
     width: 100%;
     height: 87vh;
   }

   @media screen and (max-width: 767px) {
     .video_div {
       padding: 230px 0;
       width: 100%;
     }
   }

   .video_div video {
     position: absolute;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%,-50%);
     -moz-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
     z-index: -200;
   }

   .video-overlay {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     pointer-events: none;
     opacity: .5;
     background-repeat: repeat;
   }
 // Video Div End
 </style>

Answer 2

我不知道您的具体需求，但为了对此标题全屏背景视频有基本的了解，我可以为您提供一个链接，您可以在其中学习如何制作它。 https://www.youtube.com/watch?v=O_Bw1_0u1P8

如果有任何问题，请告诉我们。

如何使用像kidscodeacademy.com这样的html添加小条纹视频背景？

2 个答案: