CODEWITHSUNDEEP
javascriptjqueryhtml
Bantersaurus
Bantersaurus

Reputation: 21

onclick placeholder image plays visible embedded video

I have used the following code from another post on here and it works great. However the video is hidden and only appears once the image is clicked.

I need a small image to sit on top of the full screen visible video. The image will be over the play button so when they click the image - the image disappears and the video starts to play.

This is my current code

CSS

.img{ z-index:1000; position:relative; onclick="z-index:-1000;"}
#vid{z-index:1px; text-align:center;}

#popup{text-align:center;
width: 100%;
position:absolute;
top:40%;
}

body {
background-color: #000;}

HTML

<div id="popup"><a href="javascript:void(0);" onclick="this.parentElement.style.display='none';"><img src="images/TRIBEONE_DINOKENG.png" width="200" height="189" class="img" /></a></div>

Help would be greatly appreciated

Thanks

Upvotes: 2

Views: 579

Answers (1)

Matthieu Caix
Matthieu Caix

Reputation: 171

There is another trick you can do in Javascript with the on click

$('#imgid').on('click',function(){
  $('#popup').innerHtml = "<iframe youtube video or other width="200" height="189">
  </iframe>";
});

With this you will change what

Upvotes: 1

Related Questions