VIDEOタグのクリックイベントで困っていること２つ

やろうとしていること

ビデオタグを使ってサムネイルを表示し、クリックイベントで全画面モーダルに
拡大したビデオを表示する

HTML
1<style>
2  #modalBase {
3    position: absolute;
4    display: none;
5    top: 0;
6    left: 0;
7    width: 100vw;
8    height: 100vh;
9    background-color: rgba(100, 200, 200, .7);
10  }
11</style>
12</head>
13<body translate="no">
14  <video controls loop muted style="width:200px;height:300px;">
15    <source src="https://player.vimeo.com/external/322244668.sd.mp4?s=338c48ac2dfcb1d4c0689968b5baf94eee6ca0c1&profile_id=165&oauth2_token_id=57447761" type="video/mp4">
16  </video>
17  <div id="modalBase"></div>
18
19  <script>
20  var aVid = document.getElementsByTagName('video');
21  var modal = document.getElementById('modalBase');
22  
23  aVid[0].onclick = function(e) {
24      modal.style.display = 'block';
25      var video = document.createElement("video");
26      video.appendChild(e.target.getElementsByTagName('source')[0])
27      video.setAttribute("controls","");
28      modal.appendChild(video)
29  }
30
31  modal.onclick = function(){
32    this.textContent = null;
33    this.style.display = 'none';
34  }
35  </script>

###困ってること１
Firefox Quantum 68.0.1ではVideoタグがクリックされても、
そのイベントがビデオのコントローラに吸い取られてしまって上記ハンドラが動作しない。
videoタグがクリックされたイベントを拾ういはどうすればいいでしょうか？
（親要素へのイベント移譲という選択肢は今回はないという前提）
###困ってること２
GoogleChrome v75.0.3770.142やSafari v12.1.1 (14607.2.6.1.1)やOpera v60.0.3255.160などでは
目的の動作をするのですが、モーダルに表示し、モーダルをクリックしてモーダルを消したあと、
再度、サムネイルのビデオタグをクリックしたら以下のエラーになる

Error
1TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node

Appendの引数がDOMでないという意味かと思うのですが、どうして２回目以降はこうなるのでしょう？

環境

MacOS Mojave 10.14.5

行動規範の内容に同意します

回答3件

困っていること１

とりあえずリグレッション的な処置だが、
Videoタグにコントロールを与えるのをやめることで解決

HTML
1<!-- <video controls loop muted style="width:200px;height:300px;"> -->
2<video muted style="width:200px;height:300px;">

投稿2019/08/02 03:30

編集2019/08/02 15:24

Fujiman

総合スコア41

困っていること２

元の要素をcloneしないと１回目のappendで
元要素を直接、モーダルに追加してるのが原因でした

JavaScript
1// video.appendChild(e.target.getElementsByTagName('source')[0])
2video.appendChild(e.target.getElementsByTagName('source')[0].cloneNode(true));