JSFiddle - React, Tailwind, and code Playground

HTML

Youtube Link: <input type="text" id="link" name="firstname">
    <button type="button" id="do-link"> Go ! </button>
    <script src="popup.js"></script>
    <p id="write">Here your link</p>
        <iframe id="iframe_id" width="640" height="390" src="//www.youtube.com/embed/u1vhQOOZUF4" frameborder="0" allowfullscreen></iframe>

JavaScript

var a;
function link() {
    a = document.getElementById('link').value;
    var videoid = youtube_parser(a);
    var new_link = "https://www.youtube.com/embed/" + videoid;
        
    document.getElementById('write').innerHTML = new_link;
    document.getElementById('iframe_id').src = new_link;
    console.log(new_link);
}
document.getElementById('do-link').onclick = link;

function youtube_parser(url){
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    var match = url.match(regExp);
    if (match&&match[7].length==11){
        return match[7];
    }else{
        alert("Url incorrecta");
    }
}