JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<div class="heading">id
    <input data-bind="value: youtubeLink" />
</div>
<iframe id="player" type="text/html" width="444" height="250" frameborder="0" data-bind="attr: { src: linkEmbed }"></iframe>

JavaScript

function MyViewModel() {
    var model = {};
    model.youtubeLink = ko.observable('https://www.youtube.com/watch?v=4UNkmlCKw9M');
    model.linkEmbed = ko.pureComputed(function () {
        var result = model.youtubeLink().replace("/watch?v=", "/embed/")
        return result;
    });
    return model;
}
ko.applyBindings(MyViewModel());