Related Content

The article in this section describes how to implement common use-cases related to the Related Content feature.

The Related Content feature adds a component to the UI which enables viewers to navigate to related content.

The Related Content feature exposes the Related API. This API allows developers to configure the related content.

Related Content

Table of Contents


Web SDK Android SDK iOS SDK tvOS SDK Android TV SDK Chromecast SDK
Yes No Yes No No N/A

The Related Content API is a UI feature. It's currently unavailable on the Android (TV) SDK because the underlying THEOplayer CSS and JavaScript modules aren't activated. This means that you also can't enable it on the Android (TV) SDK by following the guide located at How to add CSS or JavaScript files to an Android/iOS project.

Code examples


The Related Content API was first released on THEO's Web SDK.

player.related.sources = [
        image : '//cdn.theoplayer.com/video/vr/poster.jpg',
        title : 'Experience true 360/VR in THEOplayer',
        duration : '2:14',
        link : '//demo.theoplayer.com/vr-and-360'
    }, {
        image : '//cdn2.hubspot.net/hubfs/2163521/Demo_zone/CaminandesLlamaDramaPoster.jpg',
        title : "4K Streaming with THEOplayer",
        duration : '1:30',
        link : '//demo.theoplayer.com/4k'
    }, {
        image : '//cdn.theoplayer.com/video/sintel/poster.jpg',
        title : "Optimally present your content with chapter markers",
        duration : '1:30',
        link : '//demo.theoplayer.com/chapters'
    }, {
        image : '//localhost/server/azure.jpg',
        title : "Keep THEOplayer visible with picture-in-picture",
        duration : '1:30',
        link : '//demo.theoplayer.com/chapters'
    }, {
        image : "//cdn.theoplayer.com/video/big_buck_bunny/poster.jpg",
        title : "THEOplayer: Advertisements Tester (VAST, VPAID, VMAP)",
        duration : '9:57',
        link : '//demo.theoplayer.com/chapters'
    }, {
        image : "//cdn2.hubspot.net/hubfs/2163521/Demo_zone/tears_of_steel_poster.jpg",
        title : "CEA Closed Captions and Subtitles With THEOplayer",
        duration : '12:14',
        link : '//demo.theoplayer.com/closed-captions-subtitles'
    }, {
        title : "Go Big Screen With THEOplayer and Chromecast",
        link : '//demo.theoplayer.com/chromecast',
        duration : '9:57',
        image : "//cdn.theoplayer.com/video/big_buck_bunny/poster-alt1.jpg"
    }, {
        title : "Effortless casting with THEOplayer and AirPlay",
        link : '//demo.theoplayer.com/airplay',
        duration : '9:57',
        image : "//cdn.theoplayer.com/video/big_buck_bunny/poster-alt2.jpg"
    }, {
        title : "DRM and AES-128 content protection with THEOplayer",
        link : '//demo.theoplayer.com/drm-aes-128-encryption',
        duration : 'LIVE',
        image : "//cdn.theoplayer.com/video/big_buck_bunny/poster-alt3.jpg"

player.addEventListener('ended', function() {
    if (!player.related.showing) {
        setTimeout(function() {
        }, 1000);
Android (TV) SDK

This API is currently not available on the Android (TV) SDK.

iOS/tvOS SDK and Legacy iOS/tvOS SDK (4.12.x)

The Related Content API is available on the iOS SDK, but not on the tvOS SDK. This feature can be used as below:

//Prerequisite: You would need THEOplayer iOS SDK enabled with Related Content feature. 

//create a variable to decalare related content sources to the player. 
var relatedContent = self.theoplayer?.related

//Create an array variable with your related content sources. 
var relatedSources = [RelatedContentSource]()
                relatedSources.append(RelatedContentSource(image: "https://cdn.theoplayer.com/video/vr/poster.jpg", source: sampleSource1, title: "xxx"))
                relatedSources.append(RelatedContentSource(image: "https://cdn.theoplayer.com/video/sintel/poster.jpg", source: sampleSource2, title: "xxx"))

                relatedSources.append(RelatedContentSource(image: "https://cdn.theoplayer.com/video/big_buck_bunny/poster.jpg", source: sampleSource3, title: "xxx"))

                relatedSources.append(RelatedContentSource(image: "https://cdn2.hubspot.net/hubfs/2163521/Demo_zone/tears_of_steel_poster.jpg", source: sampleSource4, title: "xxx"))

                relatedSources.append(RelatedContentSource(image: "https://cdn.theoplayer.com/video/vr/poster.jpg", source: sampleSource5, title: "xxx"))

                relatedSources.append(RelatedContentSource(image: "https://cdn.theoplayer.com/video/vr/poster.jpg", source: sampleSource6, title: "xxx"))

//Add the relatedSources array to the created relatedContent variable.
relatedContent?.sources = relatedSources

// Example of Source to the player defined in above relatedSources
var sampleSource1: SourceDescription {    
  let src = "https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8"
  let stream = "application/x-mpegurl"
    return SourceDescription(
            source: TypedSource(
                src: src,
                type: stream

Important Note:

The Related Content API is limited to show a maximum of 15 tiles only. By default, it is set to show only 6 even if more than 6 are added to the player source. To show case more than 6 sources, below CSS code needs to be added to make the <div> scrollable. To add external CSS files to your iOS Project, refer to the related articles.

.theo-related-grid {
    height: 100% !important;
    overflow-y: scroll !important;

.theo-related-grid-tile {
    display: block !important;
Make sure to follow us on GitHub!
Copyright © 2022. All Rights Reserved.
New York