andrewmcodes/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles/common.css" />
    <link rel="stylesheet" href="styles/playlist.css" />
  </head>

  <body>
    <div class="container centered">
      <header>
        <img src="./wistia-logo.png" height="40" />
      </header>

      <div class="main">
        <div class="wistia_embed" style="width: 640px; height: 360px"></div>
        <ul id="medias" class="list--unstyled"></ul>
      </div>
      <div class="player_title"></div>
    </div>

    <template id="media-template">
      <li class="media">
        <a class="media-content link--unstyled" href="javascript:void(0)">
          <img class="thumbnail" />
          <div class="description">
            <div class="title"></div>
            <div class="duration label--sm"></div>
          </div>
        </a>
      </li>
    </template>

    <script src="/src/app.js" charset="utf-8"></script>
    <script src="/src/adapter.js" charset="utf-8"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/src/common.js"></script>
    <script src="/src/playlist.js"></script>
    <script
      charset="ISO-8859-1"
      src="//fast.wistia.com/assets/external/E-v1.js"
      async
    ></script>
    <script>
      // PostRoll Screen with Thumbnail of next video and eventually the countdown
      // When the first video ends, the `end` event is triggered and the `setTimeout` function is called with a delay of 5 seconds. After the delay, the `replaceWith` method is called on the `video` object with the video ID of the next video and a transition of "slide". This will replace the current video with the next video in the playlist and play it automatically.
      window._wq = window._wq || [];
      _wq.push({
        id: "_all",
        options: {
          plugin: {
            "postRoll-v1": {
              raw: '<div>Up Next</div><br/><p><img src="https://embed-ssl.wistia.com/deliveries/74ed8a4b42f47bfc423e1cbfff78952763686b4d.jpg" width="220" height="132"></p><div>Meet Lenny - #StartPup</div><br/>',
            },
          },
        },
        onReady: function (video) {
          video.bind("end", function () {
            setTimeout(function () {
              var nextVideoId = "fcztba4fz8";
              var nextVideoIndex = playlist.findIndex(function (item) {
                return item.id === nextVideoId;
              });
              if (nextVideoIndex !== -1 && !playlist[nextVideoIndex].played) {
                video.replaceWith(nextVideoId, { transition: "slide" });
                video.play();
                playlist[nextVideoIndex].played = true;
              }
            }, 5000); // wait for 5 seconds
          });
        },
      });

      // For the autoplay of the first video
      _wq.push(function (W) {
        var playedOnce = false;
        W.api(function (video) {
          if (!playedOnce) {
            playedOnce = true;
            video.play();
            var firstVideoId = video.hashedId();
            playlist.push({ id: firstVideoId, played: true });
          }
        });
      });

      var playlist = [
        { id: "fcztba4fz8", played: false },
        { id: "jz7a5jz1x4", played: false },
        { id: "8jz6jz1x4", played: false },
      ];
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="x-ua-compatible" content="ie=edge" />
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="styles/common.css" />
	<link rel="stylesheet" href="styles/playlist.css" />
	</head>

	<body>
	<div class="container centered">
	<header>
	<img src="./wistia-logo.png" height="40" />
	</header>

	<div class="main">
	<div class="wistia_embed" style="width: 640px; height: 360px"></div>
	<ul id="medias" class="list--unstyled"></ul>
	</div>
	<div class="player_title"></div>
	</div>

	<template id="media-template">
	<li class="media">
	<a class="media-content link--unstyled" href="javascript:void(0)">
	<img class="thumbnail" />
	<div class="description">
	<div class="title"></div>
	<div class="duration label--sm"></div>
	</div>
	</a>
	</li>
	</template>

	<script src="/src/app.js" charset="utf-8"></script>
	<script src="/src/adapter.js" charset="utf-8"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="/src/common.js"></script>
	<script src="/src/playlist.js"></script>
	<script
	charset="ISO-8859-1"
	src="//fast.wistia.com/assets/external/E-v1.js"
	async
	></script>
	<script>
	// PostRoll Screen with Thumbnail of next video and eventually the countdown
	// When the first video ends, the `end` event is triggered and the `setTimeout` function is called with a delay of 5 seconds. After the delay, the `replaceWith` method is called on the `video` object with the video ID of the next video and a transition of "slide". This will replace the current video with the next video in the playlist and play it automatically.
	window._wq = window._wq \|\| [];
	_wq.push({
	id: "_all",
	options: {
	plugin: {
	"postRoll-v1": {
	raw: '<div>Up Next</div><br/><p><img src="https://embed-ssl.wistia.com/deliveries/74ed8a4b42f47bfc423e1cbfff78952763686b4d.jpg" width="220" height="132"></p><div>Meet Lenny - #StartPup</div><br/>',
	},
	},
	},
	onReady: function (video) {
	video.bind("end", function () {
	setTimeout(function () {
	var nextVideoId = "fcztba4fz8";
	var nextVideoIndex = playlist.findIndex(function (item) {
	return item.id === nextVideoId;
	});
	if (nextVideoIndex !== -1 && !playlist[nextVideoIndex].played) {
	video.replaceWith(nextVideoId, { transition: "slide" });
	video.play();
	playlist[nextVideoIndex].played = true;
	}
	}, 5000); // wait for 5 seconds
	});
	},
	});

	// For the autoplay of the first video
	_wq.push(function (W) {
	var playedOnce = false;
	W.api(function (video) {
	if (!playedOnce) {
	playedOnce = true;
	video.play();
	var firstVideoId = video.hashedId();
	playlist.push({ id: firstVideoId, played: true });
	}
	});
	});

	var playlist = [
	{ id: "fcztba4fz8", played: false },
	{ id: "jz7a5jz1x4", played: false },
	{ id: "8jz6jz1x4", played: false },
	];
	</script>
	</body>
	</html>