CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mlarnt90
Mlarnt90

Reputation: 186

How to overlay an play button on an image using javaScript

I've been looking to add an overlay play button on an image, so when I click it I would be able to play an video.My question is that every similar questions are need to add a separate overlay play button in the source.

But what if I can't keep a separate image in the server then is there are anyway I can achieve the same result using javaScript?. If it can then can someone give a sample code for that.

I DON'T WANT TO USE A SEPARATE PLAY IMAGE..so is there any method I can do it?

Upvotes: 0

Views: 2346

Answers (2)

christian314159
christian314159

Reputation: 639

Here is a little CSS snippet including a JSBin example (http://jsbin.com/tarexami/1/edit?html,css,output):

.play-button {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: rgba(0,0,0,0.25);
  border-radius: 100%;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -30px;
  cursor: pointer;
}

.play-button:after {
  content: '';
  display: block;
  position: absolute;
  left: 22px;
  top: 10px;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent transparent white;
}

Upvotes: 1

Tanmay
Tanmay

Reputation: 96

Extending Christian's answer, you can use CSS Triangles as your Play button, and absolutely positioning them in a relatively positioned container.

Refer: http://css-tricks.com/snippets/css/css-triangle/

Upvotes: 2

Related Questions