HTML & JavaScriptで複数動画を順次ループ再生する方法

完成コード
ハマった点１）自動再生しない
ハマった点２）ビデオがフッタの下に表示された
参考記事

#完成コード

<div class="top-video">
<video id='video' width="640" height="360" autoplay muted ></video>
<script type="text/javascript">
'use strict';

var playlist = [
  '＜ビデオ１URL＞.mp4',
  '＜ビデオ2URL＞.mp4',
  '＜ビデオ3URL＞.mp4'
]

var video = document.getElementById('video');
video.muted = true;
video.autoplay = true;
video.style.width = '640';
video.style.height = '360';
video.controls = false;
video.src = playlist[0];
video.play();
var index = 0;

window.addEventListener('DOMContentLoaded', function(){
const videoElement = document.querySelector("video");
videoElement.muted = true;
videoElement.autoplay = true;
});

video.addEventListener('ended', function(){
  index++;
  if (index < playlist.length) {
    video.src = playlist[index];
    video.play();
  }
  else {
    video.src = playlist[0];
    video.play();
    index = 0;
  }
});
</script>
</div>

#ハマった点１）自動再生しない

HTMLにautoplayを指定したのに自動再生しなかった

<video id='video' width="640" height="360" autoplay></video>

最近のブラウザでは、音声付き動画の自動再生が制限されているため
対策：
muted：無音声再生を指定すれば自動再生された

<video id='video' width="640" height="360" autoplay muted></video>

#ハマった点２）ビデオがフッターの下に表示された

document.body.appendChild(video);

このコードのために、すべての要素の最後に回されていた
削除して普通にコンテンツ領域に表示

---

#参考記事
https://gist.github.com/yoshiiz/6134482f8fd72063e7221b7b82d27e67
http://lifelog.main.jp/wordpress/?p=981
https://se.ekaki-j.com/html5-video/