Play a video inside an image

<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;
}

This is what I am doing but its not working. Please help me asap. This is my page. http://mediacentral.ie/snapchat/?page_id=53

Because you apply the image to the after pseudo element, it renders on top of the video.

thanks for replying.

ohk. so how can I resolve this.

I am sorry I do not know much thanks again

and even if I remove the image, the video isn’t working.

You have posted this in pretty much every thread you’ve started.

While we are very happy to help beginners, it is clear from the number of sites you are working on that you are not learning, or doing this as a hobby, but are working on sites for paying clients.

That being so, do you not think you should be putting more effort into understanding the code you are using? @SamA74 has explained why things are not working; you should now have the ability to go and solve it yourself - or at least to ask more specific questions.

5 Likes

will you atleast read my comment completely.

I have also asked a question in there as well.

Before you try to make any further changes to this page, you should run it through the validator and eliminate any problems it finds.

That’s true, although I think you added that just before I posted my response; I was replying to what you wrote initially.

What steps have you taken already to solve the problem? Have you checked that the path to the video is correct?

its edited but I did not posted it after your response.

and yes, I checked the path many times and even tried with different browsers.

I also tried changing the after to before . No Luck.

any suggestions?

How many times do you have to be told - run it though the validator and fix any errors found!

2 Likes

What a splendid suggestion! Nauman_Tanwir, are you listening?

1 Like

Are you sure the video is in a supported format? My browser seems to be trying to display a message about MIME type (although I’m guessing at that).

See http://en.wikipedia.org/wiki/HTML5_video#Table

Also, there’s a tutorial here: www.html5rocks.com/en/tutorials/video/basics/

its working now.

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

and here is what I did to fix my problem.

`<div id="tv_container">
<video width="245" height="240" autoplay loop>
<source src="../snapchat/wp-content/uploads/2016/02/Snapchat%20Video%20main.mp4" type="video/mp4">
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;
    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;
}

video {
    width: 240px;
    height: 600px;
}`

And you still haven’t validated it.

AND it has even more errors!

2 Likes

The same applies to the other problem sites.
Never expect invalid code to work.
If it shows errors, the first course of action in troubleshooting is to fix those errors.

2 Likes

So the problem was the video format?

[quote=“Nauman_Tanwir, post:12, topic:215776”]
I set the videos on my page at autoplay.
[/quote]I would recommend you don’t set them to autoplay at all. You have no way of knowing where somebody will be when they view your site. Suddenly having a video playing could be inconvenient/inappropriate. Leave your visitors to choose whether or not they want to watch.

1 Like

video format and some css.

I wouldn’t had set them to video format, if I can hide the controls.

Sorry, I don’t understand what you mean by that, but again, hiding controls from visitors is a very back policy. You should always allow visitors control over how they view your site. If you try to force me to watch a video, with no method to pause it, I’m likely to close the tab instead and leave your site altogether.

as you previous said. I work for clients. So I do what client wants.

They want you to sell them invalid code?

1 Like

they want the video to be autoplay and it should only play when the user scroll down to that part of the site