Contact Menu

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).

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

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

…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.

 

No comments yet.

Leave a Reply