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

Question

我需要在主页的 html div 部分添加全屏视频作为背景。 This website 有不错的条纹视频。我非常喜欢那个视频。我怎样才能在视频上添加这种效果。
注意：我有web-m格式的视频文件。

Answer 1

我不知道你的具体需求，但为了对这个 header 全屏背景视频有一个基本的了解，我可以给你一个 link 在那里你可以学习如何制作它。 https://www.youtube.com/watch?v=O_Bw1_0u1P8

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

Answer 2

视频背景，将您的内容放入容器中。 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>

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

How to add a small stripe video background using html like kidscodeacademy.com?

html

video

background

web-deployment