HTML5ビデオ画像

-1

私はビデオの背景を再生していますが、背景に画像を追加するにはどうすればよいですか？このようなもの？私は数週間努力してきました。また、私のイメージはビデオの上に表示されません。どんな助け？HTML5ビデオ画像

body, html{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
video{ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: 1; 
 
}

<div class="container"> 
 
     <video poster="Sample.jpg" autoplay="true" loop> 
 
      <source src="background.mp4" type="video/mp4"> 
 
      <source src="background.webm" type="video/webm"> 
 
      </video> 
 
      <img src="water%20boyz.png" width="100px">  
 
       
 
       
 
      </div>

出典

2017-10-25 Andrewe3

イメージの絶対位置も試してください。また、Zインデックスを設定してください。 – Panther

私はまだ画像が表示されないようにしようとしました – Andrewe3

@Pantherによって提案された解決策が機能するはずです。あなたのフィドルを更新し、それがなぜ表示されないのかを教えてください。間違ったURLが参照されているためですか？画像URLへのリクエストが何らかのエラーを返していますか？ – Terry

1）position: relativeにあなたのコンテナを設定します。

2）ビデオと画像の両方をposition: absoluteに設定します。

3）自由に動き回ります。設定

.container { 
 
    position: relative; 
 

 
} 
 

 
.container video { 
 
    position: absolute; 
 
    top: 0; 
 
    left : 0; 
 
    width : 300px; 
 
    height: 200px; 
 
    border : red dashed 2px; 
 
} 
 

 
.container img { 
 
    position: absolute; 
 
    top: 40px; 
 
    left : 40px; 
 
    width : 100px; 
 
    height : 80px; 
 
    border : green dashed 2px; 
 
}

<div class="container"> 
 
    <video poster="Sample.jpg" autoplay="true" loop> 
 
    <source src="background.mp4" type="video/mp4"> 
 
    <source src="background.webm" type="video/webm"> 
 
    </video> 
 
    
 
    <img src="water%20boyz.png" width="100px">  
 
</div>

出典

2017-10-25 07:17:43

マイナス（ - ）z-indexvideoにあなたに必要な出力が得られます。参照のために下のスニペットを確認してください。ちょうどvideoのCSSをz-index: 1;からz-index: -99;に変更してください。

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
video { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -99; 
 
}

<div class="container"> 
 
    <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" autoplay="true" loop> 
 
      <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4"> 
 
      <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm"> 
 
      </video> 
 
    <img src="http://via.placeholder.com/350x150/red"> 
 
</div>

出典

2017-10-25 07:19:50

この

img { 
z-index:0; 
position: absolute; 
display:block 
width:100px; 
height:100px 
}

出典

2017-10-25 07:20:36 FCodex

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Fullscreen Video</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/style.css"> 
<style> 
*{ 
box-sizing: border-box; 
} 

body { 
margin: 0; 
padding: 0; 
} 

.content { 
margin: 0 auto; 
width: 100%; 
max-width: 960px; 
padding: 0 15px; 
} 

h1 { 
margin: 60px 0; 
padding: 0; 
font-size: 50px; 
text-align: center; 
} 

p { 
margin: 0 0 30px 0; 
font-size: 30px; 
line-height: 1.5; 
} 

.fullscreen-bg { 
position: fixed; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
overflow: hidden; 
z-index: -100; 
} 

.fullscreen-bg__video { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
} 

@media (min-aspect-ratio: 16/9) { 
.fullscreen-bg__video { 
    height: 300%; 
    top: -100%; 
} 
} 

@media (max-aspect-ratio: 16/9) { 
.fullscreen-bg__video { 
    width: 300%; 
    left: -100%; 
} 
} 

@media (max-width: 767px) { 
.fullscreen-bg { 
    background: url('../img/videoframe.jpg') center center/cover no- 
repeat; 
} 

.fullscreen-bg__video { 
    display: none; 
} 
} 
</style>

<div class="fullscreen-bg"> 
    <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video"> 
     <source src="http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.mp4" type="video/mp4"> 
     <source src="http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.ogv" type="video/ogg"> 
     <source src="http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.webm" type="video/webm"> 
    </video> 
</div> 

<div class="content"> 
    <h1>Full screen HTML5 video background</h1> 
    <p>Lorem ipsum dolor sit amet, vix te quidam commodo placerat. Mei ne dicunt minimum disputationi, purto everti adolescens id cum, quis veritus cotidieque eum ex. Ea eirmod atomorum posidonium sed, splendide dissentiunt an mel. Dolorem suavitate voluptatibus pro no. No duo conceptam cotidieque.</p> 
    <img src="download.jpg"/> 
</div> 

</body>

012をお試しください

出典

2017-10-25 07:21:22

答えて

関連する問題