[英]Creating parallax effect with HTML background video
我通過使用HTML5視頻元素及其在本地計算機上按預期工作的方式創建了具有視差效果的網頁。 但是,當我將文件上傳到Web托管服務器並訪問網站時,背景視頻無法播放,並且在屏幕上的任何位置都完全看不到,除非當我從導航欄底部快速向上滾動時,它的一小部分顯示在導航欄下方網頁。
HTML元素:
<video loop autoplay>
<source src="https://s3.ap-south-1.amazonaws.com/howthatworks/video.mp4" type="video/mp4">
</video>
我的背景視頻元素的CSS:
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
margin-top: 98px;
transform: translateX(-50%) translateY(-50%);
}
有什么想法嗎?
當我在本地硬盤驅動器上存儲的文件上運行網站時,它運行正常。
請使用source標記內的視頻鏈接的src,如下所示。
<video loop autoplay>
<source src="https://s3.ap-south-1.amazonaws.com/howthatworks/video.mp4" type="video/mp4">
</video>
這是codepen演示鏈接 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.