JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<div class="group">
    <img class="youtube-poster" src=" http://i2.ytimg.com/vi/juIJGBxj-4w/maxresdefault.jpg" data-url="https://www.youtube.com/embed/juIJGBxj-4w==1" />
    <div class="video-poster-player">
        <i class="play">Play</i>
    </div>
</div>

<div class="group">
   
    <img class="youtube-poster" src=" http://i2.ytimg.com/vi/juIJGBxj-4w/maxresdefault.jpg" data-url="https://www.youtube.com/embed/juIJGBxj-4w==2" />
    <div class="video-poster-player">
        <i class="play">Play</i>
    </div>
</div>

<div class="group">
    <img class="youtube-poster" src=" http://i2.ytimg.com/vi/juIJGBxj-4w/maxresdefault.jpg" data-url="https://www.youtube.com/embed/juIJGBxj-4w==3" />
    <div class="video-poster-player">
        <i class="play">Play</i>
    </div>
</div>

CSS

img { display: block; width: 100px; }
.video-poster-player { border: 1px solid red; }

JavaScript

$(document).on('click', '.video-poster-player', function(event) {
    event.stopPropagation();
    var $group = $(this).closest(".group");
    var frameURL = $group.find('.youtube-poster').data('url');
    alert (frameURL);
});