JSFiddle - React, Tailwind, and code Playground
HTML
<media class="box" src="https://www.google.com/images/srpr/logo4w.png">Hello world!</media>
<media class="box" src="https://iai-robot.co.th/case/industry/swf/yueki_suuryou-kakunin.m4v">Hello world!</media>
JavaScript
jQuery(function ($) {
$.fn.changeElementType = function (newType) {
if (!this.length) return; // added
var attrs = {};
$.each(this[0].attributes, function (idx, attr) {
attrs[attr.name] = attr.value;
});
this.replaceWith(function () {
var element = $('<' + newType + '/>', attrs);
if (newType !== 'img')
element.append($(this).contents());
return element;
});
}
$('media[src$=".png"]').changeElementType('img'); // changed slightly
$('media[src$=".m4v"]').changeElementType('video'); // changed slightly
});