ページのヘッダー部の動画に網掛けをする。

Question

トップページのヘッダーの動画に網掛けをして表示させたいのですが、imgタグだと繰り返し表示されません。
以下のページを参考にしました。
https://inthecom.net/2923

<div class="video">
<img src="../img/top/08.png">
<video src="../img/top/seri.mp4" autoplay></video>
</div>

div.video {
  height: 600px;
  background-size: cover;
  text-align: center;
  position: relative;
  overflow: hidden;
}
div.video video {
  margin: 0 auto;
  width: 100%;
  z-index: 1;
}
div.video img {
  z-index: 2;
  position: absolute;
  top: 100px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

上記方法だと画像は上に来るのですが、繰り返しができないみたいです。
何か方法はあるのでしょうか。
you tubeを使った全画面背景動画に網掛けをするという事例は、検索できるのですが
videoタグでページの一部分に網掛けするということはできないのでしょうか。

動画編集にPremiere Proを使用していますが、動画編集ソフトでの編集方法も探ってみたのですがわかりませんでした。
よろしくお願いします。

---------------------------------編集部分-----------------------------
イメージとしては、
http://www.creative-web.co.jp/lab/002/
こういう感じで網掛け(上)、動画(下）という風にしたいのです。
"tubular"といったライブラリーを使用する場合、You Tubu動画しか使用できなさそうでした。You Tubeを使用していないので、できればvideoタグで実現できればと思っています。また全画面表示ではなく、ヘッダー部分あたりに表示させたいです。
よろしくお願いします。

Comments

[x_x]

繰り返しはCSSで可能ですが、動画の背景にということでしょうか？　動画部分には当然動画が表示され、その後ろは見えないと思いますがどういうのを期待していますか？

Answer 1

imgタグではなくCSS側で背景として設定してはいかがでしょうか？

<div class="video">
   video tag
</div>

.video{
  height: 600px;
  background-size: cover;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color:#777;
}

.video:after{
  background-image:url(cssから見た網掛け用透過画像のパス);
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

videoに重ねたことが無いのでうまくいくかわかりませんがお試しください。

Comments

[manabunbun]

dit.さんご回答ありがとうございました。
思い通りにうまくできました。divの背景を設定してその下にvideoを配置すれば良かったんですね。
発想の転換ですね。
ありがとうございました。

Answer 2

<video>タグに「loop」を追加したら繰り返さないですか？

<video src="../img/top/seri.mp4" autoplay loop></video>

Comments

[manabunbun]

ご回答ありがとうございました。
繰り返すのは、ビデオの方でした。網掛けは、そのままで繰り返しませんでした。

[yoshinavi]

返答が遅くなりすみません。

＞網掛けは、そのままで繰り返しませんでした。

網掛けの画像が表示されないのでしょうか？何か他のコード（CSS・JS等）が影響しているように思います。
キャプチャー画像等あると、他の皆さんも判断がしやすいと思います。