Html <video>элементы управления тегами не работают должным образом

Question

Я создал видеоплеер со списком воспроизведения. Проблема в том, что передний элемент управления не работает должным образом, так как я не могу переслать видео. В чем может быть проблема, потому что он отлично работает при работе с видеофайлами stati c.

вот мой код html. Я использовал 3 вкладки, которые загружают видео iframe, нормальное видео и PowerPoint iframe. это создает проблему из-за перекрытия.

Js код:

  var video_player = document.getElementById("video_player"),
  links = video_player.getElementsByTagName('a');
  for (var i=0; i<links.length; i++) {
   links[i].onclick = handler;
   }

  function handler(e) {
    e.preventDefault();
    videotarget = this.getAttribute("href");
    filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget;
    video = document.querySelector("#video_player video");
    video.removeAttribute("poster");
    source = document.querySelectorAll("#video_player video source");
    source[0].src = filename + ".mp4";
    source[1].src = filename + ".webm";
    video.load();
    video.play(); 

  }