我需要添加一個全屏視頻作爲背景,但在主頁上的html div部分。 This website有漂亮的條紋視頻。我完全喜歡那個視頻。我怎樣才能在視頻上添加這樣的效果。
注:我有web-m格式的視頻文件。如何使用html像kidscodeacademy.com添加小條紋視頻背景?
0
A
回答
0
我不知道你的具體需求,但對於這個標題全屏幕背景視頻的基本理解,我可以給你一個鏈接,你可以學習如何使它。 https://www.youtube.com/watch?v=O_Bw1_0u1P8
請讓我們知道,如果有任何問題。
+0
有用的視頻,我做到了。非常感謝。 :) –
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("https://d3k5xyayaartr5.cloudfront.net/_assets/pattern-overlays/patterns/black-dots.png");"></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>
相關問題
- 1. 如何在HTML部分的背景添加Youtube視頻
- 2. HTML移動大小的背景視頻?
- 3. 使用JMF,如何將視頻添加到JPanel的背景?
- 4. HTML網站視頻背景
- 5. 添加一個小視頻剪輯作爲背景
- 6. 使HTML背景視頻高度小和寬100%
- 7. 如何獲得細條紋背景?
- 8. 背景視頻
- 9. 使用CSS添加控件到HTML5背景視頻
- 10. Rails表條紋不能爲條紋行添加額外的背景
- 11. 如何在html5中添加背景音樂到視頻?
- 12. 如何將視頻添加爲滑塊背景?
- 13. 如何用背景圖像爲背景顏色重新添加背景顏色?
- 14. d3pie.js中的條紋背景
- 15. 如何添加背景圖像與僞
- 16. 如何添加背景圖像到div?
- 17. JQM如何添加背景圖像
- 18. 如何使背景圖像與YouTube視頻溢出
- 19. 視頻爲網站背景? HTML 5
- 20. html視頻背景不在線播放
- 21. HTML背景視頻寬高比
- 22. 如何添加上述頭背景圖像(小提琴)
- 23. 如何在一個小部件中添加圖像背景
- 24. 背景視頻調整大小問題
- 25. 如何在圖像上添加HTML文本或使背景圖像響應
- 26. 如何添加背景顏色在html代碼中使用beautifulsoup?
- 27. 背景視頻HTML5
- 28. Spotify視頻背景
- 29. 如何使背景圖像不能在html中調整大小?
- 30. HTML背景視頻調整爲響應的屏幕大小
你到目前爲止做了什麼?你有一些代碼給我們看? 基本上他們有一個背景的視頻周圍添加一個容器。 – DFayet