JSFiddle - React, Tailwind, and code Playground

by scurrilus

HTML

<!-- styles for the overlay plugin -->
<link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel="stylesheet">
<!-- player embed code with an added id attribute -->
<video-js id="myPlayerID"
       data-video-id="5854481866001"
       data-account="4332409863001"
       data-player="ByGdadQZ2e"
       data-embed="default"
       data-application-id
       class="video-js"
       controls
       width="640"
       height="360"></video-js>
<script src="https://players.brightcove.net/4332409863001/ByGdadQZ2e_default/index.min.js"></script>

<!-- script for the overlay plugin -->
<script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script>

CSS

/* * The body style is just for the
 * background color of the codepen.
 * Do not include in your code.
 */
body {
  background-color: #111;
  color: #fff;
}
/*
 * styles essential to the sample
 * are below
 */
/* styles for the video thumbnails */
.video-thumbnail {
  margin: 0;
  padding: 0;
  width: 190px;
  height: 107px;
  cursor: pointer;
}
/* Override some of the default overlay styling */
div.vjs-overlay.vjs-overlay-top-left
{
  width: 100%;
  left: 0;
}

JavaScript

var myPlayer,
    videoData = [],
    // Build options needed for CMS API request
    options = {},
    requestBody = {},
    baseURL = "https://cms.api.brightcove.com/v1/accounts/";

options.proxyURL = "https://vups-uat.funkedigital.de/videos/search/";
options.requestType = "GET";

// +++ Wait for loadedmetadata +++
videojs("myPlayerID").one('loadedmetadata', function(){
  myPlayer = this;
  // set up data for CMS API request
  setRequestData();
  // Make the CMS API request to get related videos
  makeRequest(options, function(relatedVideos) {
    if (relatedVideos) {
      // Convert response string into JSON
      JSONrelatedVideos = JSON.parse(relatedVideos);
      // extract the needed video data into an array
      videoData = extractVideoData(JSONrelatedVideos);
      // generate the HTML for the overlay
      videoList = createVideoList(videoData);
      // add the overlay
      addOverlayText(videoList);
    }
  });
});

// +++ Setup the API request +++
/**
  * sets up the data for the API request
  */
function setRequestData() {
  var endPoint = '',
      accountId,
      tagValue,
      videoName,
      endPoint,
      requestData = {};

  accountId = myPlayer.mediainfo.account_id;
  tagValue = myPlayer.mediainfo.tags[0];
  videoName = myPlayer.mediainfo.name;

  // return up to 9 videos which have a tag value equal to the current video tag value, excluding the current video by name
  endPoint = encodeURI('?q=tags:"' + tagValue + '"+-name:"' + videoName + '"&limit=9');
  options.url = baseURL + accountId + "/videos" + endPoint;
}

// +++ Make the CMS API request +++
/**
	* send API request to the proxy
	* @param  {Object} options for the request
	* @param  {String} options.url the full API request URL
	* @param  {String="GET","POST","PATCH","PUT","DELETE"} requestData [options.requestType="GET"] HTTP type for the request
	* @param  {String} options.proxyURL proxyURL to send the request to
	* @param  {String} options.client_id client id for the account...