O2 Player Barrage Extension

In this example below you will see how to do a O2 Player Barrage Extension with some HTML / CSS and Javascript

This awesome code was written by creativeadea, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright creativeadea ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>O2 Player Barrage Extension</title>
      <link rel="stylesheet" href="css/style.css">



  <h2>O2 Player Barrage Extension</h2>
<div class="player-container"></div>
  <script src='https://cdn.vidible.tv/prod/player/js/latest/vidible-min.js'></script>


    <script  src="js/index.js"></script>



/*Downloaded from https://www.codeseek.co/creativeadea/o2-player-barrage-extension-xYqgZx */
:root {
  --maxw: 600px;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif

body, h1, h2 {
  font-family: var(--font);
  font-weight: lighter;

.player-container {
  max-width: var(--maxw);

/*Downloaded from https://www.codeseek.co/creativeadea/o2-player-barrage-extension-xYqgZx */
// Setup Player using script API
var vdbPlayer = vidible
    pid: '5a7c6ea6cc912f2b46cd69ce',
    bcid: '545db032e4b0af1a81424b48',
    videos: ['5a04726c92fdde69a381febc'],
    extensions: [
        name: 'barrage',
        url: 'barrage.js',
        config: {
          giphyApiToken: 'abc123',
          memeStreamApiUrl: '',
          giphyApiUrl: 'http://api.giphy.com/v1/gifs/search?q=__QUERY__&api_key=__YOUR_API_KEY__&limit=10'