slab pop up youtube video embed via url

a simple way to convert a youtube video url to a popup view via one or more buttons.

by Jim Infantino

HTML

<div>
    <button id="videobutton1" class="videobutton" data-url="http://www.youtube.com/watch?v=zbYf5_S7oJo">show video 1</button>
    <button id="videobutton2" class="videobutton" data-url="https://www.youtube.com/watch?v=HL-usDKLnik">show video 2</button>
</div>
<div id="ytvideo"></div>

<p>This is a simplification & expansion of <a href="http://jsfiddle.net/isherwood/cH6e8/6/">isherwood's answer to</a> <a href="http://stackoverflow.com/questions/21607808/convert-a-youtube-video-url-to-embed-code/21607897#21607897">a question on stackoverflow.com</a></p>

CSS

.youtubepopup {
    position:absolute;
    top:50%;
    left:50%;
    margin:-175px 0 0 -295px;
    width:560px;
    height:315px;
    padding:30px;
    background:black;
    z-index:650;
}

a.closex { color: white; position: absolute; top: 5px; right: 5px; with: 15px; height: 15px; font-size: 15px; line-height: 15px; cursor: pointer; }

JavaScript

function popYouTubeId(buttonid) {
    var youTubeUrl = $(buttonid).attr('data-url');
    var youTubeId;
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = youTubeUrl.match(regExp);
    if (match && match[2].length == 11) {
        youTubeId = match[2];
    } else {
        youTubeId = 'no video found';
    }
    $('#ytvideo').html('<div class="youtubepopup"><a class="closex">x</a><iframe width="560" height="315" src="//www.youtube.com/embed/'+youTubeId+'" frameborder="0" allowfullscreen></iframe></div>');
    $('a.closex').click( function(){
        $('.youtubepopup').remove();
    });
}

var buttonid;

$('.videobutton').click( function(){
	buttonid = '#'+$(this).attr('id');
    popYouTubeId(buttonid);
});