Edit in JSFiddle

(function (d, w) {
    "use strict";
    var input = d.getElementById("input"),
        output = d.getElementById("output"),
        btn = d.getElementById("btn");
    //--------------------[main function]
    function playlistYT(a) {
        var result;
        btn.disabled = 1;
        output.className = "output";
        if (a.length) {
            if (/https?\:\/\/www\.youtube\.com\/watch\?v=[A-Za-z0-9_\-]+((&list=[A-Za-z0-9_\-]+(&index=\d+)?)|((&index=\d+)?&list=[A-Za-z0-9_\-]+))/.test(a)) {
                result = a.split("&")[0];
                btn.disabled = 0;
            } else {
                output.className = "output error";
                result = "invalid input";
            }
        } else {
            result = "";
        }
        return result;
    }
    //--------------------[input event trigger]
    input.oninput = function () {
        output.value = playlistYT(input.value);
    };
    //--------------------[select input]
    input.onclick = function () {
      	input.select();  
    };
    //--------------------[select output]
    output.onclick = function () {
      	output.select();  
    };
    //--------------------[open new tab]
    btn.onclick = function () {
        w.open(output.value);
    };
}(document, window));

<h1>YT Playlist Extractor</h1>
<p>
    <input id='input' placeholder="Paste here" type="text">
</p>
<p>
    <input class="output" readonly id="output" placeholder="Result" type="text">
</p>
<p>
    <button type="button" id="btn" class="btn" disabled>GO TO EXTRACTED URL</button>
</p>

body {
    background: #eee;
    text-align: center;
}

body,
input,
button {
    font-family: consolas, monaco, menlo, courier, monospace;
    box-sizing: border-box;
}

input,
button {
    padding: 10px 20px;
    margin: 30px auto;
    border-radius: 6px;
    font-size: 1.2em;
    background-color: azure;
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: center;
}
.output {
    background-color: lavender;
    color: royalblue;
}
.btn {
    background-color: initial;
    width: 300px;
    max-width: 100%;
}
input:focus {
    outline: none;
}
.error {
    background-color: lightpink;
    color: red;
}
.btn:hover {
    cursor: pointer;    
}
.btn[disabled]:hover, .error:hover {
    cursor: not-allowed;
}