What kind of play button was designed here?

HTML & CSS
1

I tried to copy the code but it wouldn’t work

[Album] imgur.com

<span class="play"><i class="circle"></i><i class="tri"></i>&nbsp;</span>

element {
}
a.video .play {
    height: 2em;
    line-height: 2em;
    display: inline-block;
    vertical-align: middle;
    z-index: 2;
    font-size: 4em;
    color: #ddd;
    opacity: 0.7;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1em 0 0 -1em;
}
2

If you’re going to copy code from elsewhere, you need to copy all the relevant code. The HTML you have posted includes three classes: .play, .circle and .tri.

3

What’s missing?

4 
element {
}
a.video .play .tri {
    font-family: dashicons;
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    font-style: normal;
    font-size: 2em;
    margin-left: -0.05em;
}
a.video .play {
    line-height: 2em;
    font-size: 4em;
    color: #ddd;
}
5

How would you put that into https://jsfiddle.net?

6

First, you need to find all the relevant code.

7

<a href="https://www.youtube.com/watch?v=Pd_C3YK3kI4&amp;autoplay=1" class="video" title="Brush with Bamboo: the world's most eco-friendly toothbrush." data-slb-active="1" data-slb-asset="784821116"><span class="play"><i class="circle"></i><i class="tri"></i>&nbsp;</span><span class="title">Watch the video</span><img src="//brushwithbamboo.com/wp-content/uploads/2011/07/home-video-cover.jpg" alt="home-video-cover" height="693" width="451"></a>

8

I give up.

9

Hi there asasass,

check out the attachment to see a responsive example
which you can easily amend to suit your requirements. :winky:

asasass.zip (30.1 KB)

coothead

1 Like
10

How would I get it working in here:

@font-face {
  font-family: play;
  src: url(../fonts/play.eot);
  src: url(../fonts/play.eot#iefix) format('embedded-opentype'), url(../fonts/play.woff2) format('woff2'), url(../fonts/play.woff) format('woff'), url(../fonts/play.ttf) format('truetype'), url(../fonts/play.svg#play) format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: #f0f0f0;
  font: 1em/1.62em verdana, arial, helvetica, sans-serif;
}

#test {
  position: relative;
  width: 50%;
  margin: auto;
  border: 0.1em solid #000;
  box-shadow: 0.4em 0.4em 0.4em #999;
}

#test img {
  display: block;
  width: 100%;
  height: auto;
}

#test a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: play;
  font-size: 6vw;
  color: rgba(223, 223, 224, 0.5);
  cursor: pointer;
  text-decoration: none;
}

#test a::before {
  content: '\e800';
}

#test a:hover,
#test a:active {
  color: rgba(255, 255, 255, 0.7);
}

<div id="test">
  <img src="images/blood.jpg" alt="blood" height="320" width="640">
  <a href="https://www.youtube.com"></a>
</div>
11

@coothead provided a working version. If you want to test it on JSfiddle, then you should only need to copy the code over.

12

I do not code for anything fiddly. :unhappy:

It’s “raison d’être” has always been totally
beyond my rather naive comprehension.

I do code for browsers though, and that
is where I suggest that you should test it. :winky:

coothead

3 Likes
13

I did, it doesn’t work on jsfiddle.

14

Online sites like JSFiddle and CodePen are OK for sharing code snippets, but I wouldn’t waste your time writing specifically for them.

How is it in your browser (what most people use to surf the net) eg.

3 Likes
15

If you do not want to show your site, there are free hosting sites and free domains available.

I have tried a couple of free hosting sites and they are ideal for testing.

16

Show me it working on jsfiddle. Pretty please…

17

Why? You’ve yet to explain why you need it to work on JSFiddle.

(You might also bear in mind that saying “please” never goes amiss. It sounds less like a demand and is more likely to get a positive response.)

2 Likes
18

pretty please with a cherry on top.

19

You seem to have missed this part:

20

The code uses both an image and a Web font. In coothead’s code, the required files are all there and correctly referenced.

As far as I can see, for it to work on JSFiddle, you would need to have those files hosted online somewhere, and change the path to the files to point instead to the external source. There doesn’t seem to be any way to upload those files directly to JSFiddle, but as I never use it, I may be missing something.

2 Likes