JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="box">
    <label>Ссылка</label>
    <input type="text" id="txtLink" />
</div>
<div class="box">
    <img id="imgThumb" />
    <div class="info">
        <input type="text" id="txtTitle" />
        <textarea id="txtDesc"></textarea>
    </div>
</div>

CSS

* { margin: 0 }
body {
    font: 13px/20px Helvetica, Arial, sans-serif;
}
div.box {
    border: solid 1px lightgrey;
    background: rgb(250, 250, 250);
    padding: 15px;
    margin: 15px;
}
input, textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: dotted 1px lightgrey;
}
textarea { height: 200px; margin-top: 15px }
label {
    display: block;
    margin: 0 0 2px;
}

JavaScript

$(function() {
    
    var youtubeLinkRex = /http:\/\/(?:youtu\.be\/|(?:[a-z]{2,3}\.)?youtube\.com\/watch(?:\?.*|#\!.*)v=)([\w-]{11}).*/;
    
    function showInformation() {
        
        var txt = $('#txtLink');
        var id = txt.val().match(youtubeLinkRex);
        
        if(!id) return;
        else
            id = id[id.length - 1];
        
        $('div.box').fadeTo('fast', 0.5);
        
        $.getJSON('http://gdata.youtube.com/feeds/api/videos/' + id + '?v=2&alt=json-in-script&callback=?', function (r) {
            $('#txtTitle').val(r.entry["title"].$t);
            $('#txtDesc').val(r.entry["media$group"] != null ? r.entry["media$group"].media$description.$t : '');
            
            // 0 = big, 1 = small thumb
            $('#imgThumb').prop('src', 'http://img.youtube.com/vi/' + id + '/1.jpg'); 
            
            $('div.box').stop().fadeTo('fast', 1);
        });
    }
    
    $('#txtLink').bind('input paste change', showInformation);
    
});