In this article we show you how you can embed a youtube video in your lightbox.

To embed youtube-videos into the lightbox, we suggest the following html:

<a href="http://youtu.be/R0JpqpufaDs" data-bblb-href="//www.youtube.com/embed/R0JpqpufaDs" class="bblb" data-bblb-width="1280" data-bblb-height="700">Youtube</a>

Both of this links are available below the video on youtube. The first link is available if you press "Share" and the second if you press "Embed" after that.

Even though this would be the best solution, sometimes it is not possible. Maybe the CMS supports only one url or the lightbox should work with the data that is already available.

In that case the best solution is to convert the urls via javascript just before the initialization of the lightbox.

$('.bblb')
	.each(function() {
		var $this = $(this),
			href = $this.data('bblb-href') || this.href;

		if (href) {
			href = href.match(/^(http)?s?:?\/\/(www\.)?youtu(\.be\/|be\.com\/watch\?v=)(.*)/);
		}

		if (href && 5 == href.length) {
			$this.data('bblb-href', '//youtube.com/embed/' + href[4].replace(/[^-\w].*/, ''));
		}
	})
	.bbLightbox();

There are a couple of reasons we did not include this into the lightbox:

  • 99% will never need this, because they do not show a youtube-video or use our suggested html
  • changing the url without your notice is very intransparent
  • if youtube changes anything with their urls the lightbox would create wrong urls without a chance to fix it yourself