JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<img src="http://www.gravatar.com/avatar/48231943117b8e0d0db0abdcb57a9032?s=32&d=identicon&r=PG" data-video="https://player.vimeo.com/video/297666980">
    
    <iframe src="https://player.vimeo.com/video/297666980" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<p><a href="https://vimeo.com/297666980">Atoms video</a> from <a href="https://vimeo.com/wearatoms">Atoms</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

JavaScript

$('img').click(function(){
        video = '<iframe src="'+ $(this).attr('data-video') +'" allow="autoplay; fullscreen" allowfullscreen></iframe>';
        $(this).replaceWith(video);
    });