YouTube Gallery snippet & table transform for OU Campus

Here’s a neat way to present multiple YouTube videos in a responsive “gallery” in OU Campus. This example uses a mix of Bootstrap CSS and CSS specific to the gallery. Thanks to Wooster Web Design for the HTML/CSS/JS.

With the YouTube Gallery snippet and XSL transform, you can create a video gallery of multiple YouTube videos, selectable by clicking thumbnail images.

Here’s the table transform snippet (add HTML to /_resources/ou/snippets, then create new item in Content > Snippets).

<table class="ou-youtube-gallery transform" style="width: 100%;">
	<caption>YouTube Gallery Table</caption>
	<thead>
		<tr>
			<th width="30%">Title</th>
			<th>YouTube ID (code after "watch?v=" e.g. G4RT-prDbIw in youtube.com/watch?v=G4RT-prDbIw or youtu.be/G4RT-prDbIw)</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
			My YouTube Video
			</td>
			<td>
			G4RT-prDbIw
			</td>
		</tr>
		<tr>
			<td>
			Another YouTube Video
			</td>
			<td>
			o5ZymO9UgjM
			</td>
		</tr>
	</tbody>
</table>
<br />

Here’s the XSL template match; this belongs in an XSL file such as common.xsl or interior.xsl.

<!-- transform YouTube Gallery -->
<xsl:template match="table[contains(@class, 'ou-youtube-gallery')]">
	<xsl:variable name="id" select="position()" />
  	<style type="text/css">
		@import url(//www.yourdomain.edu/_resources/css/youtube-gallery.css);
  	</style>
	<script type="text/javascript" src="/_resources/js/youtube-gallery.js" />

	<div class="well">
		<!-- THE YOUTUBE PLAYER -->
		<div class="vid-container">
			<iframe id="vid_frame{$id}" frameborder="0" width="560" height="315">
				<xsl:attribute name="src">https://www.youtube.com/embed/<xsl:value-of select="./tbody/tr[1]/td[2]//text()"/>?rel=0&amp;showinfo=0&amp;autohide=1</xsl:attribute>
			</iframe>
		</div>

		<!-- THE PLAYLIST -->
		<div class="vid-list-container">
			<div class="vid-list">

				<xsl:for-each select="./tbody/tr">
					<div class="vid-item" onclick="document.getElementById('vid_frame{$id}').src='https://youtube.com/embed/{td[2]//text()}?autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=1'">

						<div class="thumb"><img alt="video thumbnail" src="https://img.youtube.com/vi/{td[2]//text()}/0.jpg" /></div>

						<div class="desc"><xsl:value-of select="td[1]//text()" /></div>

					</div>
				</xsl:for-each>

			</div><!--/vid-list-->
		</div><!--/vid-container-->

		<!-- LEFT AND RIGHT ARROWS -->
		<div class="arrows">
			<div class="arrow-left"><i class="icon-chevron-left icon-large"><!--scroll left--></i></div>
			<div class="arrow-right"><i class="icon-chevron-right icon-large"><!--scroll right--></i></div>
		</div>

	</div>
</xsl:template>

And here are the .js for scrolling and .css for styling

//www.woosterwebdesign.com/responsive-youtube-player-with-playlist/

$(document).ready(function () {
		    $(".arrow-right").bind("click", function (event) {
		        event.preventDefault();
		        $(".vid-list-container").stop().animate({
		            scrollLeft: "+=336"
		        }, 750);
		    });
		    $(".arrow-left").bind("click", function (event) {
		        event.preventDefault();
		        $(".vid-list-container").stop().animate({
		            scrollLeft: "-=336"
		        }, 750);
		    });
		});

/* styles responsive YouTube Gallery with scrolling thumbnails */
/** /www.woosterwebdesign.com/responsive-youtube-player-with-playlist/ **/

/*  VIDEO PLAYER CONTAINER
############################### */
.vid-container {
	position: relative;
	padding-bottom: 52%;
	padding-top: 30px; 
	height: 0; 
}

.vid-container iframe,
.vid-container object,
.vid-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*  VIDEOS PLAYLIST 
############################### */
.vid-list-container {
	width: 92%;
	overflow: hidden;
	margin-top: 20px;
	margin-left:4%;
	padding-bottom: 20px;
}

.vid-list {
	width: 3680px;
	position: relative;
	top:0;
	left: 0;
}

.vid-item {
	display: block;
	width: 148px;
	height: 148px;
	float: left;
	margin: 0;
	padding: 10px;
}

.thumb {
	/*position: relative;*/
	overflow:hidden;
	height: 84px;
}

.thumb img {
	width: 100%;
	position: relative;
	top: -13px;
}

.vid-item .desc {
	color: #21A1D2;
	font-size: 15px;
	margin-top:5px;
}

.vid-item:hover {
	background: #eee;
	cursor: pointer;
}

.arrows {
	position:relative;
	width: 100%;
}

.arrow-left {
	color: #fff;
	position: absolute;
	background: #777;
	padding: 15px;
	left: -25px;
	top: -130px;
	z-index: 99;
	cursor: pointer;
}

.arrow-right {
	color: #fff;
	position: absolute;
	background: #777;
	padding: 15px;
	right: -25px;
	top: -130px;
	z-index:100;
	cursor: pointer;
}

.arrow-left:hover {
	background: #CC181E;
}

.arrow-right:hover {
	background: #CC181E;
}


@media (max-width: 624px) {
	body {
		margin: 15px;
	}
	.caption {
		margin-top: 40px;
	}
	.vid-list-container {
		padding-bottom: 20px;
	}

	/* reposition left/right arrows */
	.arrows {
		position:relative;
		margin: 0 auto;
		width:96px;
	}
	.arrow-left {
		left: 0;
		top: -17px;
	}

	.arrow-right {
		right: 0;
		top: -17px;
	}
}

…and, finally, some instructions for use:

Click the Insert Snippet button, then choose category Video/Embedded Media > YouTube Gallery

This will insert a table in which you enter Title and YouTube ID for each video. This creates a gallery as shown below. To insert additional videos, click the cursor on a table row, then click the Table button, and choose Row > Insert Row Before (or after), then enter the additional title and ID.