JSFiddle - React, Tailwind, and code Playground

by samu_eyes

HTML

YouTube ID: <span id="myId"></span>
<br />
<br />
Embed code: <pre id="myCode"></pre>


<figure class="media">samu<oembed url="https://www.youtube.com/watch?v=4RvPw0L2CPg"></oembed></figure>

CSS

#myId {
    color: orange;
}

JavaScript

function getId(url) {
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);

    if (match && match[2].length == 11) {
        return match[2];
    } else {
        return 'error';
    }
}

/* var samuYTB = 'http://www.youtube.com/watch?v=zbYf5_S7oJo'; */
 var    samuYTB = $('oembed').attr('url');

var myId = getId(samuYTB);

$('#myId').html(myId);


$('figure.media').html('<iframe width="560" height="315" src="//www.youtube.com/embed/' + myId + '" frameborder="0" allowfullscreen></iframe>');

$('#myCode').html('<iframe width="560" height="315" src="//www.youtube.com/embed/' + myId + '" frameborder="0" allowfullscreen></iframe>');