YouTube Video Embeds
Embedding video throughout Sonos sites just got easier.
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>
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
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">×</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.
||Yes||Necessary for plugin initialization. If you put this attribute on a
||Yes||To interact with the YouTube API at all, we need to know what the video ID is.|
||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.|
||No||Allows you to specify a caption. Line-breaks are supported.|
||No||Used in conjunction with
||No||Used for video playlists. Indicates what element is used as the "main" player.|
||No||Used for video playlists. Indicates what elements belong to the "main" player of the playlist.|
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:
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.