JSFiddle - React, Tailwind, and code Playground
HTML
<!-- container video would feed into -->
<div class="content-img-wrapper">
<div class="content-img-placeholder"></div>
</div>
<!-- input -->
<div class="text-group">
<input class="text-input js-thumb" type="text" placeholder="URL" required>
</div>
JavaScript
$(document).ready(function() {
var thumbFetch = $('.js-thumb');
var youTubeID = thumbFetch.val().substring(thumbFetch.lastIndexOf('/') + 1);
thumbFetch.change(function() {
if(thumbFetch.val().length > 0) {
$('.content-img-wrapper').html('<iframe width="100%" height="100%" src="http://www.youtube.com/embed/' + youTubeID + '?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>');
} else {
$('.content-img-wrapper').empty();
$('.content-img-wrapper').html('<div class="content-img-placeholder"></div>');
}
});
});