Playing a video inside an image

问题

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.

回答1:

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>

来源：https://stackoverflow.com/questions/35483767/playing-a-video-inside-an-image

标签

css3

html5-video