Как добавить небольшой фоновый фон с использованием html, например kidscodeacademy.com?

Question

Мне нужно добавить полноэкранное видео в качестве фона, но в разделе html div на домашней странице. This website имеет приятное полосовое видео. Мне точно нравится это видео. Как добавить такой эффект над видео.
Примечание: у меня есть файл видео в формате web-m.

Answer 1

Я не знаю о ваших конкретных потребностях, но для базового понимания этого полноэкранного фонового видео заголовка я могу дать вам ссылку, где вы можете узнать, как это сделать. 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>