HTML背景ビデオで視差効果を作成する

Question

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%); 
} 

ホスティングウェブサイトへのリンク：このことについてhttp://www.howthatworks.net/debug.html

任意のアイデア？

ローカルハードドライブに保存されているファイルでWebサイトを実行すると、完全に機能します。

Answer 1

下記のソースタグ内の動画リンクのsrcを使用してください。

<video loop autoplay> 
    <source src="https://s3.ap-south-1.amazonaws.com/howthatworks/video.mp4" type="video/mp4"> 
</video> 

ここにはcodepen demo linkがあります。