JSFiddle - React, Tailwind, and code Playground
by Weston Ruter
HTML
<a href="https://vimeo.com/41011190" target="_blank">
<img src="https://secure-b.vimeocdn.com/ts/283/797/283797216_640.jpg" data-iframe="http://player.vimeo.com/video/41011190?autoplay=1">
</a>
JavaScript
jQuery(function($){
$('a:has(img[data-iframe])').click(function (e) {
var img = $(this).find('img[data-iframe]');
var iframe = $('<iframe>', {
src: img.data('iframe'),
width: img.prop('width'),
height: img.prop('height'),
border: 0 // this is better to handle with CSS
});
$(this).replaceWith(iframe);
e.preventDefault(); // ensure the browser doesn't navigate to the link
});
});