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, '<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/$3&fs=1&ap=%2526fmt%3D18&hd%3D1" width="480" height="388" title="Click to play"><param name="movie" value="http://www.youtube.com/v/$3&fs=1&ap=%2526fmt%3D18&hd%3D1"><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"></object>');
}