JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="txt" /><input type="button" id="btn" value="Watch"/>
<iframe width="420" id="myFrame" height="315" src="//www.youtube.com/embed/vvj4NoMNFpU" frameborder="0" allowfullscreen></iframe>
<object width="620" height="300" data="" id="mideo"></object>

JavaScript

document.getElementById("btn").onclick = function()
{
    var url = document.getElementById("txt").value;
    if (url !== "")
    {
        var video_id = url.split('v=')[1];
        var ampersandPosition = video_id.indexOf('&');
        if (ampersandPosition != -1) {
            video_id = video_id.substring(0, ampersandPosition); 
        }
        
        document.getElementById("myFrame").src = "//www.youtube.com/embed/" + video_id;
        document.getElementById("mideo").data = "//www.youtube.com/embed/" + video_id;
    }
};