JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<p>Paste a YouTube URL below (e.g., http://www.youtube.com/watch?v=vo9ydSu5YiE):</p>
<textarea cols="60" rows="8"></textarea>
<div class="preview"></div>

CSS

textarea {
    padding: 5px;
    background-color: #eee9bf;
    border: solid 2px #000;
}

.preview {
    padding: 5px;
}

JavaScript

$('textarea').bind('keyup paste', function (evt) {
    var $this = $(this);
    setTimeout(function () {
        $('.preview').html(ytEnable($this.val()));
    }, 100);
});

function ytEnable (str) {
    var re = /(https?:\/\/)?(www\.)?youtube\.com\/watch\?v=([A-Z0-9]+)/img;
    return str.replace(re, '<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/$3?origin=wellplayed.org" frameborder="0" autohide="1"></iframe>');
}