Wie fügt man einen kleinen Streifen Video Hintergrund mit HTML wie kidscodeacademy.com?

Question

Ich muss ein Vollbild-Video als Hintergrund aber in einem HTML Div-Abschnitt auf der Startseite hinzufügen. This website hat ein schönes Streifenvideo. Ich mag genau dieses Video. Wie kann ich einen solchen Effekt über das Video hinzufügen?
Hinweis: Ich habe Web-Format-Video-Datei.

Answer 1

Ich weiß nicht, über Ihre spezifischen Bedürfnisse, aber für ein grundlegendes Verständnis dieses Header Fullscreen-Hintergrundvideos kann ich Ihnen einen Link geben, wo Sie lernen können, wie man es macht. https://www.youtube.com/watch?v=O_Bw1_0u1P8

Bitte lassen Sie uns wissen, wenn es ein Problem gibt.

Answer 2

Video Hintergrund, Legen Sie Ihren Inhalt in den Container. https://jsfiddle.net/ashwinshenoy/rh7n5d0g/1/

Hoffe, das hilft Kumpel!

<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>