Playing a video inside an image

Question

my question is related to this this question

<div id="tv_container">
<video width="300" height="240" controls>
<source src="Spin1038.mov" type="video/mov">
 Your browser does not support the video tag.
</video>
</div>

#tv_container {
    width: 360px; 
    height: 800px; 
    position: relative;
}
#tv_container:after {
    content: '';
    display: block;
  background: url('http://mediacentral.ie/snapchat/wp-content/uploads/2016/02/Cell.jpg') no-repeat top left transparent;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 10;
}
#tv_container video {
    position: absolute;
    top: 30px; 
    left: 40px; 
    z-index: 5;
}

I am doing the same thing. The its not working and even if I remove the image, the video isn't working even then as well.

This is my page.

Please post a complete problem description in your question and not just a link to another similar question. If that question is ever deleted, then your question will lose all meaning. — j08691, Feb 18 '16 at 14:18
@NaumanTanwir Don't need to, I think it's fixed, please see my answer. — zer00ne, Feb 18 '16 at 14:28

score 0 · Accepted Answer · answered Feb 18 '16 at 14:22

Change #tv_container:after { z-index: -10 }

Also changed the <video width='245'....>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#tv_container {
    width: 360px; 
    height: 800px; 
    position: relative;
}
#tv_container:after {
    content: '';
    display: block;
  background: url('http://mediacentral.ie/snapchat/wp-content/uploads/2016/02/Cell.jpg') no-repeat top left transparent;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: -10;     /* This should be lowest z-index value */
}
#tv_container video {
    position: absolute;
    top: 30px; 
    left: 40px; 
    z-index: 5;
}
</style>
</head>

<body>
<div id="tv_container">
<video width="245" height="240" controls>
<source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4"></video>
</div>


</body>
</html>

although, I set the videos on my page at autoplay. So, they all start playing at the same time. Is there a way, they play only when I scroll to that part of the page. This is my page ( http://mediacentral.ie/snapchat/) — Nauman Tanwir, Feb 18 '16 at 15:13
That's another question, go ahead and post the question and I'll answer. — zer00ne, Feb 18 '16 at 15:48

Playing a video inside an image

1 Answers1

Linked