HTML5 Video Bild

-1

ok, also habe ich meinen Video-Hintergrund spielen lassen, aber wie füge ich mein Bild über den Hintergrund hinzu? etwas wie das? Bild über Video Hintergrund Ich habe seit Wochen versucht. Außerdem wird mein Bild nicht über dem Video angezeigt. Irgendeine Hilfe?HTML5 Video Bild

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>

Quelle

2017-10-25 Andrewe3

versuchen Sie die absolute Position für das Bild und setzen Sie den entsprechenden Z-Index. – Panther

Ich habe versucht, das Standbild zeigt nicht – Andrewe3

Die von @Panther vorgeschlagene Lösung sollte funktionieren. Aktualisieren Sie Ihre Geige und zeigen Sie uns, warum es nicht angezeigt wird? Liegt es daran, dass auf eine falsche URL verwiesen wird? Gibt die Anfrage an die Bild-URL eine Art Fehler zurück? – Terry

1) Stellen Sie Ihren Behälter position: relative.

2) Stellen Sie sowohl das Video als auch das Bild auf position: absolute.

3) Bewegen Sie frei herum.

.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>

Quelle

2017-10-25 07:17:43

Einstellung negativ (-) z-index-video geben Sie die gewünschte Ausgabe. Überprüfen Sie das folgende Snippet als Referenz. Ändern Sie einfach video css von z-index: 1; zu 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>

Quelle

2017-10-25 07:19:50

Versuchen Sie, diese

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

Quelle

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>

Quelle

2017-10-25 07:21:22

HTML5 Video Bild

Antwort

Verwandte Themen