YouTube Video Embeds

Embedding video throughout Sonos sites just got easier.

Basic Example

We've provided an easy plugin for embedding YouTube videos.

Video + Gallery Carousel A combination pattern of embedded video inside a gallery carousel.
Video + Reveal A combination pattern of a video player inside a reveal modal window.
Video Playlist Video playlist examples. 
<div data-tube data-video-id="oQiET7VhHIg"></div>

Advanced Examples

Sometimes, embedding a YouTube player may not work for a particular design. We can pass in some options that will load a preview image instead, with a play button linked to that video's YouTube url.

<div data-tube data-video-id="bUhKFNy6Igo" data-preview-image data-text-overlay="SONOS PLAY:1">

Using YouTube Playlists

The YouTube plugin also supports playlists. Just specify what the playlist id is with a data attribute.

<div data-tube data-video-id="7FWLSBL3qrs" data-playlist-id="PL16nFy_yUyOXsirv6vReqPgrt1PB1YMNZ">

Providing Your Own Preview Image

The above example loads a preview image from the YouTube API. You might have also noticed that we added our own caption with the [data-text-overlay] attribute.

Maybe you don't want to use the preview image from YouTube and want to specify your own. No worries.

<div data-tube data-video-id="bUhKFNy6Igo" data-preview-image="/images/docs/PLAY1_HomeTheater.jpg"
data-text-overlay="SONOS PLAY:1"></div>

Opening YouTube Player In Modal

For embedded images, the play button link automatically goes over to YouTube (this is the best way to handle the way touch devices do video). But if we want to, we can have the play button open the YouTube player in a modal window.

Please make sure your modal IDs are unique and pay special attention to the div.place-video element. This determines where in your modal structure the YouTube player will be embedded.

<div data-tube data-video-id="xDboX4JOGkY" data-preview-image data-text-overlay="SONOS WIRELESS HIFI" data-modal="videoModal"></div>
<div id="videoModal" class="reveal-modal theater" data-reveal>
	  <div class="row">
		  <div class="columns small-6">
			  <div class="place-video"></div>
		  </div>
	  </div>
	  <a class="close-reveal-modal">&times;</a>
</div>

Plugin Data Options

The YouTube embedding plugin support seven data options. Some are required, others are optional. We'll list them all out so you know what they do.

Option Required Purpose
data-tube Yes Necessary for plugin initialization. If you put this attribute on a div, Suit assumes you want to embed a video or image.
data-video-id Yes To interact with the YouTube API at all, we need to know what the video ID is.
data-preview-image No Tells the plugin to load an image instead of a YouTube player. You can use the preview image from YouTube or specify your own.
data-text-overlay No Allows you to specify a caption. Line-breaks are supported.
data-modal No Used in conjunction with data-preview-image. Tells the play button to open the YouTube player in a modal window. The value for data-modal must equal the ID of the modal itself.
data-playlist-main No Used for video playlists. Indicates what element is used as the "main" player.
data-playlist-items No Used for video playlists. Indicates what elements belong to the "main" player of the playlist.

JavaScript API

If you use the [data-init] attribute on your template's body tag, then you don't need the following code. If you don't, you'll need to add this:

$('[data-tube]').tube();

Accessing the YouTube API for a player instance

You can control any embedded YouTube player through the YouTube API. To return an instance of a player, use the getPlayer() method of the plugin.

var player = $('[data-tube]').eq(0).tube('getPlayer');

If your selector asks for multiple players, this method will only return the first one. It's best to ask for the player instance of a single element.

Once you have a player instance, you can access any of the YouTube API methods as documented on the YouTube JavaScript API Reference.