JSFiddle - React, Tailwind, and code Playground

by Ryan Perez

HTML

youtubelink<BR>
<input type="text" name="youtube" id ="youtube" value="" /><div id="ytlInfo">dd</div>

CSS

#ytlInfo{display:none}
#ytlInfo.fieldok{display:block}

JavaScript

function ytVidId(url) {
    var p = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/;
    return (url.match(p)) ? RegExp.$1 : false;
}

$('#youtube').bind("change keyup input", function() {

    var url = $(this).val();
    if (ytVidId(url) !== false) {
        $('#ytlInfo').addClass('fieldok');
    } else {
        $('#ytlInfo').removeClass('fieldok');
    }
});