Youtube Toggle

by wrxsti85

HTML

<a href="#lb1">Lightbox 1</a>
<a href="#lb2">Lightbox 2</a>
<a href="#lb3">Lightbox 3</a>
<a href="#lb4">Lightbox 4</a>
<div id="lb1" class="lightbox">
    <iframe src="https://www.youtube.com/embed/C0DPdy98e4c"></iframe>
</div>
<div id="lb2" class="lightbox">
    <iframe src="https://www.youtube.com/embed/C0DPdy98e4c"></iframe>
</div>
<div id="lb3" class="lightbox">
    <iframe src="https://www.youtube.com/embed/C0DPdy98e4c"></iframe>
</div>
<div id="lb4" class="lightbox">
    <iframe src="https://www.youtube.com/embed/C0DPdy98e4c"></iframe>
</div>

CSS

.lightbox {
    display: none;
    background: rgba(0,0,0,.8);
    width: 100%;
    padding: 20px 0px;
    margin-bottom: 10px;
}
.lightbox iframe {
    display: block;
    width: 304px;
    margin: 10px auto;
}

JavaScript

var toggleVid = function(selector){
    var url = $(selector + ' iframe').attr('src');
    $(selector + ' iframe').attr('src', url + '?autoplay=1');
    $(selector).fadeIn(400);
};

$('.lightbox').click(function(){
	$(this).children('iframe').attr('src', $(this).children('iframe').attr('src').replace('?autoplay=1', '')).parent().fadeOut(400);
});

$('a').click(function(e){
	e.preventDefault();
    toggleVid( $(this).attr('href') );
});