play a video inside an image

Question

I am trying to play a video inside a png image that should work as a frame for my video. I found a first solution for my problem in this other SO question:

HTML : play a video inside an image

But the thing that this question doesn't solve for me is that the video is not clickable. this is a good solution if I want my video to be set on autoplay. But I my video to play only when I click on it.

And I know that this solution will not allow me to click on the controls, as the png image will be in front of the video, and the control buttons won't be accessible.

Is there a solution for this?

EDIT

my HTML code:

<div id="video">
    <video id="my_video_1" class="video-js vjs-default-skin" 
     preload="auto" width="501" height="282" poster="images/video.gif" onclick="this.play();"controls
     data-setup="{}">
     <source src="video/final.webm" type='video/webm'/>
     <source src="video/final.mp4" type='video/mp4'/>
    </video>
      </div>

my CSS:

video {
    padding-left:2px;
    padding-top: 2px;   
    z-index: 5;
}

#video{
    margin-top:70px;
    background-size: cover;
    width:501px;
    height:286px;
    text-align: left;
    cursor: pointer;
    position:relative;
}

#video:after {
    content: '';
    display: block;
    background: url(images/vecto.png) no-repeat top left transparent;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 10;
}

More details/code/example please; If you have your video within a `div` with a `background-image` as in the linked question, the image is not on top of the video ... — Alex K., Apr 11 '14 at 13:15
@AlexK. I have edited my question to show you my code. my png is the background of the div containing the video. — zahi daoui, Apr 11 '14 at 13:26

score 0 · Answer 1 · answered Apr 11 '14 at 13:17

0

The solution you found should work with your situation. If you use CSS z-index:11; in the style for your video and z-index:10; for your wrapper. The video should then be clickable.

answered Apr 11 '14 at 13:17

DD0UG

144
6

and dont forget to add position:relative to make z-index work – AlexPrinceton Apr 11 '14 at 13:18
this will cause the video to play in front of the frame. I want the video to play behind the frame! – zahi daoui Apr 11 '14 at 13:29

DarylF · Answer 2 · 2014-04-11T13:36:20.310

Without seeing your code I cannot give an exact answer but you could set up a click event on the img with javascript which will play the video.

<div id="video">
    <video id="my_video_1" class="video-js vjs-default-skin" 
     preload="auto" width="501" height="282" poster="images/video.gif" onclick="this.play();"controls
     data-setup="{}">
     <source src="video/final.webm" type='video/webm'/>
     <source src="video/final.mp4" type='video/mp4'/>
    </video>
</div>

JavaScript

$("#video").click(function() {
    $("#my_video_1").play();
});

or

$("#video").click(funciton() {
    var Video1 = $("#my_video_1").get(0);
    Video1.play();
});

I haven't tested this answer so I have given two version of the JS which should do the same thing. Basically the JS says when an element with ID="video" is clicked then play element with ID="my_video_1"

There is also room to add other things to the js function such as if its already playing then pause etc. or dynamically add playback icons — DarylF, Apr 11 '14 at 14:05

play a video inside an image

2 Answers2

Linked