画面全体に背景動画を流したい

Question

前提、実現したいこと

Webサイトの編集をしています。画面全体に背景動画を流したいのですが、動画が表示されません。
該当部分を確認しましたが、自分では問題が見つけられず、もしかしたら他のコード（ヘッターやメイン部分）が優先してうまくいっていないのかなとも思います。

該当のソースコード

<section class="backgroundvideo">
			<h1>Title</h1>
			<div id="video-area">
				<video id="video" poster="img/movie.jpg" webkit-playsinline playsinline muted autoplay loop>
				
				<source src="video/movie.mp4" type="video/mp4">
				<source src="video/movie.ogv" type="video/ogv">
				<source src="video/movie.webm" type="video/webm">
				<p>動画を再生できる環境ではありません。</p>
				</video>
			<!--/video-area--></div>
		</section>

.backgroundvideo {
    position: relative;
    height: 100vh;
} 

.backgroundvideo .video-area{
    position: fixed;
    z-index: -2;
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

.backgroundvideo .video {
    position: absolute;
    z-index: -2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}

.backgroundvideo .h1{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    color:#000;
    text-shadow: 0 0 15px #666;
}	

Comments

[webgoto]

正しく動作していると思いますが、動画ファイルのパスに誤りがあるということはないでしょうか？
また、表示されないというのはposterに指定した画像が表示されている状態ということでしょうか?

[Kiiko1]

それが、動画のパスも私が確認している限りでは問題ないと思います。
指定した画像も表示されず、真っ白の空白（指定したサイズ）が表示されます。文字も表示されていません。

[m.ts10806]

ディレクトリ構成を提示してください。客観的に「問題ない」ことがわかる情報が必要です。
またHTMLを見る感じではブラウザから直接アクセス可能な場所に置いているように見えます。
ブラウザから動画URLに直接アクセスするとどうなりますか？

Answer 1

パスに問題がないのであれば、cssが影響して非表示になっているのかもしれません。
確認のために下記を追加してみて、もしこれで表示されるならば、何かしらのcssの影響で消えています。

*{
	position: static !important;
	overflow: visible !important;
	display: block !important;
}

また今回の問題とは別ですが、記載のcssのセレクタが誤っています。

/* idは# */
.backgroundvideo .video-area{
↓
.backgroundvideo #video-area{

/* idは# */
.backgroundvideo .video {
↓
.backgroundvideo #video {

/* タグ名は.不要 */
.backgroundvideo .h1{
↓
.backgroundvideo h1{