Embedding Channels

Overview

For our partners and content providers, Samsung XR offers Embedded Channels, which allows non-Samsung XR websites the ability to quickly and easily add a channel playlist on any webpage.

Embedded Channels offers the following:

A couple lines of code and it's up and works mostly anywhere.
Customizable colors and fonts, so it adapts to your website's color scheme.
Launches interactive 360° videos from your embedded channel playlist on your website without the need to use our embedded videos.
Responsive design allows the component and video popups to look and feel at home on laptops, tablets, and phones.

Since Samsung XR hosts the video content, and allows users to create and arrange channels, all you need is a code snippet and it works on any website.

Instructions

You will need 2 snippets of code in order to add the embedded channel component.

The JavaScript code: <script src="https://www.samsungvr.com/channels-ui/channels.js"></script>
The Embed Snippet: <samsungvr-channels channel-id="<YOUR-CHANNEL-ID>"></samsungvr-channels>

And that's it. Just replace <YOUR-CHANNEL-ID> with your channel ID (you can get the channel ID by visiting you user account in the Creator Portal (https://samsungvr.com/portal/account). You can look for your User ID there.

NOTE: For responsiveness, make sure that at minimum your website specifies the width in viewport meta tag:

<meta name="viewport" content="width=device-width">

However, the following is the general recommendation (source):

<meta name="viewport" content="width=device-width, initial-scale=1">

Setting the width to device-width allows Embedded Channels to adapt to the user's screen, whether they are on a mobile, tablet, or desktop-sized screen.

See here for more information.

Customize It

Embedded Channels offers the following customizations:

Customization	Attribute	Property Type	Effect
Background Color	`bg-color`	String - CSS Hex color.	Changes the background color for the entire component.
Font Color	`font-color`	String - CSS Hex color.	Changes the font color of all the text in the component.
Font Family	`font-family`	String - Font Family such as "Arial" or "Roboto".	Replaces the font used (default Arial) with the one supplied.
Border Color	`border-color`	String - CSS Hex color.	Changes the border color with the one provided.
Dark Background	`dark-bg`	Boolean	Tells the component to use a logo image with white text (easier to read). By default, a logo with black text is displayed.

Example (black background, white text and border):

<samsungvr-channels channel-id="<YOUR-CHANNEL-ID>"
    bg-color="#000"
    border-color="#fff"
    font-color="#fff"
    font-family="Gotham SSm A"></samsungvr-channels>

Remember, if you decide to use a darker background, to additionally supply the dark-bg attribute:

<samsungvr-channels channel-id="<YOUR-CHANNEL-ID>"
    bg-color="#000"
    dark-bg="true"></samsungvr-channels>

The dark-bg attribute tells the component to use a brand logo with white text so it will be easier to read agaist the dark background.

FAQ

What browsers are supported?

Most major browsers are supported, including Chrome, Firefox, Microsoft Edge, and Safari (Mac OSX) on Windows, Macs, Android, and Linux. However, because of device limitations on iOS (Safari, Chrome, etc), videos will only function correctly in portrait mode (tall), but not in landscape mode (wide). This is because iOS has a bug (see here and here) where it doesn't detect device orientation properly, and therefore, when you turn your phone from portrait to landscape mode, the video does not turn sideways appropriately.

Internet Explorer is not supported. IE does not support WebGL, which is required for 360° videos to display properly, so videos do not work there, either. For Windows users, we suggest that you use Microsoft Edge, where videos display properly.

Only 1 (or 2) video(s) is displayed (and there's a lot of empty space).

Embedded Channels requires at least 3 videos in order to display properly on desktops (only 1 video is displayed at a time on smaller/mobile screens). Please make sure that your channel has at least 3 items in order for Embedded Channels to work as intended.

What if my channel has sub-channel?

Embedded Channels only supports top-level videos right now, and won't display any nested channels. If you would like to surface videos from a sub-channel (nested channel), create another HTML snippet and use that channel's ID where the channel ID is required (there's no need to add the JavaScript snippet more than once).

Known Issues

As mentioned above:

Embedded Channels does not work on Internet Explorer.
Browsers on iOS (Safari, Chrome, etc) do not work in landscape mode (portrait mode is fine).

SUPPORT