【HTML/CSS】video背景全体を覆う、透過性ありの黒地設定につきまして

###前提・実現したいこと
videoタグで以下のように背景全体で動画を流していますが、
その上に載せる白字テキストを強調するため、
動画の前に透過性のある黒地の幕を1つ敷きたい状況です。

video {
background-size: cover;
height: auto;
left: 50%;
min-width: 100%;
min-height: 100%;
opacity: 0.8;
position: fixed;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: auto;
z-index: -100;
}

###発生している問題・エラーメッセージ
relative/absoluteやz-indexやopacityやfixedや、
必要な設定方法はネット上のものを調べたのですが、
結局どう書いたらいいのかで躓いている状況です。
具体的な書き方を教えていただきたいです。

###該当のソースコード
HTML/CSS

###補足情報(言語/FW/ツール等のバージョンなど)
以下サイトを参考に作成していました。
http://coliss.com/articles/build-websites/operation/css/fullscreen-background-video-used-html5-by-demosthenes.html

aKusano

2016/05/24 12:36

最終的にどのようにしたいのか分からないので答えようがありません。あと、ソースコードもvideo要素のコードはありますが、「黒地の幕」に相当する要素やそれに対応するCSSをどう書いたのか全く記載がありませんよね？不足している情報を追記してみると、回答がつくかもしれません。

行動規範の内容に同意します

回答2件

用意するのが大変なので動画では確認していませんが

css
1.relative{
2  position: relative;
3}
4.relative:before{
5  content: '';
6  position: absolute;
7  top: 0;
8  left: 0;
9  display: block;
10  width: 100%;
11  height: 100%;
12  background-color: rgba(0,0,0,0.3);
13  z-index: 100;
14}

こんな感じで.relativeの枠と同じサイズ＆動画より上のレイヤー＆黒背景透過0.3になるかと思います。
「白字テキスト」がhtmlのどこに入るのか不明なためこれに関しては考慮していません。

投稿2016/05/24 18:01

退会済みユーザー

総合スコア0

ベストアンサー

構造がわからないのでやり方だけでも。

HTML
1<div class="relative"> 
2	<video autoplay loop src="動画ファイル" muted></video> 
3</div>
4<div class="relative_next"> 
5	<!-- >コンテンツ</ -->
6</div>

CSS
1.relative::before {
2    background-color: rgba( 0, 0, 0, .5 );
3    content: "";
4    height: 100%;
5    left: 0;
6    position: fixed;
7    top: 0;
8    width: 100%;
9    z-index: 0;
10}
11.relative_next {
12    position: relative;
13}