如何使用html像kidscodeacademy.com添加小條紋視頻背景？

我需要添加一個全屏視頻作爲背景，但在主頁上的html div部分。 This website有漂亮的條紋視頻。我完全喜歡那個視頻。我怎樣才能在視頻上添加這樣的效果。
注：我有web-m格式的視頻文件。如何使用html像kidscodeacademy.com添加小條紋視頻背景？

來源

2016-04-29 Farukul Islam Rana

你到目前爲止做了什麼？你有一些代碼給我們看？基本上他們有一個背景的視頻周圍添加一個容器。 – DFayet

我不知道你的具體需求，但對於這個標題全屏幕背景視頻的基本理解，我可以給你一個鏈接，你可以學習如何使它。 https://www.youtube.com/watch?v=O_Bw1_0u1P8

請讓我們知道，如果有任何問題。

來源

2016-04-29 08:45:48

有用的視頻，我做到了。非常感謝。 :) –

視頻背景，將您的內容放入容器中。 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>

來源

2016-04-29 09:27:24 Ashwin

如何使用html像kidscodeacademy.com添加小條紋視頻背景？

回答

相關問題