HTML5 Video Image

Question

ok so I got my video background playing but how do I add my image over the background? something like this? image over video background I have been trying for weeks. also, my image doesn't show on top of the video. Any help?

 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>

Answer 1

1) Set your container to position: relative .

2) Set both the video and image to position: absolute .

3) Freely move stuff around.

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

Answer 2

Setting negative(-) z-index to video will give you the desired output. Check below snippet for reference. Just change video css from z-index: 1; to 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>

Answer 3

Try this

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

Answer 4

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

HTML5 Video Image

Question

4 answers

solution1
0 2017-10-25 07:17:43

solution2
0 2017-10-25 07:19:50

solution3
0 2017-10-25 07:20:36

solution4
0 2017-10-25 07:21:22

HTML5 Video Image

Question

4 answers

solution1 0 2017-10-25 07:17:43

solution2 0 2017-10-25 07:19:50

solution3 0 2017-10-25 07:20:36

solution4 0 2017-10-25 07:21:22

solution1
0 2017-10-25 07:17:43

solution2
0 2017-10-25 07:19:50

solution3
0 2017-10-25 07:20:36

solution4
0 2017-10-25 07:21:22