JSFiddle - React, Tailwind, and code Playground

HTML

Enter YouTube URL (video or playlist): <input type="text" id="oemb" style="padding:5px;width:400px;"/><br />
<br />
<div id="oembed" style="width:400px;height:300px;margin-left:auto;margin-right:auto;border:1px solid black;">&nbsp;</div>

JavaScript

var oe_clrtimer;
var oe_edttimer;
var oe_oldhtml="";
var oe_oldeditval="";
function oembed_indiv(response) {
  clearTimeout(oe_clrtimer);
  if(response && response.html && oe_oldhtml != response.html) {
    $('#oembed').html(response.html);
    oe_oldhtml = response.html;
  }
}

function oembedit(urli) {
  filename = "http://oembed-js.appspot.com/?url=" + encodeURIComponent(urli) + "&callback=oembed_indiv&maxwidth="+$('#oembed').width()+"&maxheight="+$('#oembed').height();
  var scr=document.createElement('script');
  scr.setAttribute("type","text/javascript");
  scr.setAttribute("src",filename);
  document.getElementsByTagName("head")[0].appendChild(scr);

}

$('#oemb').bind('input keyup change',function() {
  if(oe_edttimer) clearTimeout(oe_edttimer);
  oe_edttimer = window.setTimeout(function() {
    if($('#oemb').val() != oe_oldeditval) {
        oe_clrtimer = window.setTimeout(function() {
           $('#oembed').html(""); oe_oldhtml="";
        }, 2000);
        matches = $('#oemb').val().match(/[^/s]*(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})[^\s]*/i);
      if(matches && matches.length)
        oembedit(matches[0]);
    }
    oe_oldeditval = $('#oemb').val();
    oe_edttimer = 0;
  }, 1500 );
});