Playing a game trailer

How It Works

You can set up playing of the game trailer in the modal window of your site. To add this feature, make sure the video is published on YouTube.

Who Can Use It

Partners who have already integrated Site Builder.

How to Get It

  1. Go to Publisher Account > Site Builder.
  2. Add the Button component to the chosen block and change your button text.
  3. Set the component type to Link and insert the link to the YouTube video.
  4. Insert the following code to the Custom code block:

<script>
 (function () {
  var trailerBlock = '.block--header';
  var trailerBlockNumber = 0;
  var trailerButtonNumber = 0;
  var autoPlay = false;

  var style = document.createElement('link');
  style.rel = 'stylesheet';
  style.href = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css';
  document.getElementsByTagName('head')[0].appendChild(style);

  var element = document.querySelectorAll(trailerBlock)[trailerBlockNumber].querySelectorAll('.ui-site-calltoaction--link')[trailerButtonNumber];
  var selector = trailerBlock + '-' + trailerBlockNumber + '-' + Date.now();
  element.setAttribute('data-unique-id', selector);

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js';
  script.addEventListener('load', function (e) {
    $()
      .fancybox({
        height: 528,
        width: 940,
        selector: '[data-unique-id="' + selector + '"]',
        youtube: {
          autoplay: autoPlay
        }
      });
  }, false);
  document.getElementsByTagName('body')[0].appendChild(script);
})();
</script>

  1. Modify the following parameters:
    1. trailerBlock — the name of the CSS class of the block that contains the trailer button. Possible options are:
      • .block--header (the Header block)
      • .block--hero (the Call to action block)
      • .block--packs (the Packs block)
    2. trailerBlockNumber — the sequence number of the block that contains the trailer. Minimum value is 0.
    3. trailerButtonNumber — the sequence number of the trailer button. Minimum value is 0.
    4. autoPlay — automatic playback of the video. Set to true if you want the video to play automatically after the window is opened.

  1. Click Preview to see your changes.

Here is the tutorial video for this recipe: