I want to remove in :before background image.

Php file,

```
    <li class="vi">
    <a href="javascript:;">
<span class="play-btn"></span><img src="/v1.jpg" data-video="https://www.youtube.com/embed/Nxj8BWiyypQ?rel=0&amp;showinfo=0&amp;autoplay=1" class="videoGPoster"> 
    </a>
    <h5>Videos 2</h5>
    </li>

```

CSS,

```
    .home_gallery .gallery_wheel .recent_photpvideo ul li.vi:before {
        position: absolute;
        top: 30%;
        width: 120px;
        height: 120px;
        content: "";
        background: url(images/play.png);
        background-size: cover;
        left: 30%;
        transform: translate(0%,0%);

.play-btn {
    position: absolute;
    top: 30%;
    width: 120px;
    height: 120px;
    content: "";
    background: url(images/play.png);
    background-size: cover;
    left: 30%;
    transform: translate(0%,0%);
    z-index: 1;
}

```

JS File,

```
jQuery('img.videoGPoster').click(function () {
    video = '<iframe width="400" height="300" src="' + jQuery(this).attr('data-video') + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
    jQuery(this).replaceWith(video);
});

```

I have use this code after but its not working,

```
jQuery('.play-btn').click(function () {
    alert();

    video = '<iframe width="400" height="300" src="' + jQuery(this).attr('data-video') + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';

    jQuery(this).replaceWith(video);
});

```

Image is => <https://prnt.sc/idkci7>

I want to click on image button then play a video then play button not display but now play button is displayed. Please anyone help how to remove play button on :before with jquery. => <https://prnt.sc/idkeop>