Advanced YouTube Examples

Building custom implementations with the YouTube plugin.

This example demonstrates how we can use Suit and the YouTube embed plugin to build a video playlist. It's important to know that this pattern really only works on the Desktop. On touch devices, autoplaying a video is not allowed (due to the large possibility that there might be limited bandwidth). On touch devices, the video thumbnails gracefully falls back to simple links to YouTube. You can still play the main video on touch devices.

Matt & Kim

Justin Boreta of the Glitch Mob

Josiah Bell & Jurnee Smollett

Andrew Scheps

<div data-tube data-video-id="7FWLSBL3qrs" data-playlist-main="athome"></div>
<div class="row small-collapse" data-playlist-items="athome">
  <div class="columns small-12 medium-6 large-3">
    <div data-tube data-video-id="7FWLSBL3qrs" data-preview-image></div>
    <p>Matt & Kim</p>
  </div>
  <div class="columns small-12 medium-6 large-3">
    <div data-tube data-video-id="P_vzfzgIQIQ" data-preview-image></div>
    <p>Justin Boreta of the Glitch Mob</p>
  </div>
  <div class="columns small-12 medium-6 large-3">
    <div data-tube data-video-id="fhLJETP63vs" data-preview-image></div>
    <p>Josiah Bell & Jurnee Smollett</p>
  </div>
  <div class="columns small-12 medium-6 large-3">
    <div data-tube data-video-id="5WrvEUv-XPU" data-preview-image></div>
    <p>Andrew Scheps</p>
  </div>
</div>

Playlist with Carousel

This playlist example is slightly different with its integration with the carousel plugin.

Matt & Kim

Justin Boreta of the Glitch Mob

Josiah Bell & Jurnee Smollett

Andrew Scheps

<div class="row small-collapse">
	  <div class="columns small-12">
		  <div data-tube data-video-id="T7_BF_Qh-t4" data-playlist-main="playlistCarousel"></div>
		  <div data-playlist-items="playlistCarousel" data-playlist-items-carousel class="row small-collapse">
			  <div class="columns small-12">
				  <div class="carousel">
					  <div class="item">
						  <div data-tube data-video-id="T7_BF_Qh-t4" data-preview-image></div>
						  <p>A-Trak</p>
					  </div>
					  <div class="item">
						  <div data-tube data-video-id="P_vzfzgIQIQ" data-preview-image></div>
						  <p>Justin Boreta of the Glitch Mob</p>
					  </div>
					  <div class="item">
						  <div data-tube data-video-id="fhLJETP63vs" data-preview-image></div>
						  <p>Josiah Bell & Jurnee Smollett</p>
					  </div>
					  <div class="item">
						  <div data-tube data-video-id="5WrvEUv-XPU" data-preview-image></div>
						  <p>Andrew Scheps</p>
					  </div>
				  </div>
				  <div class="pagination"></div>
			  </div>
		  </div>
	  </div>
</div>

JavaScript

Add this JavaScript to your page to initialize the carousel.

$('[data-playlist-items-carousel]').find('.carousel').carouFredSel({
  width: '100%',
  height: 'variable',
  align: 'justify',
  items: {
    visible: 3,
    minimum: 0,
    width: '100%',
    height: 'variable'
  },
  auto: false,
  scroll: {
    items: 1
  },
  prev: {
    key: 'left'
  },
  next: {
    key: 'right'
  },
  swipe: {
    onTouch: true,
    onMouse: true,
    items: 1
  },
  pagination: $('[data-playlist-items-carousel]').find('.pagination')
});