javascriptで、モーダルウィンドウ上で再生されている動画を、動画以外の場所を押した時に停止したい。

前提・実現したいこと

javascriptで、モーダルウィンドウ上で再生されている動画を、動画以外の場所を押した時にも停止したい。

発生している問題・エラーメッセージ

javascriptの初心者です。いろいろ調べて見様見真似でやってみましたが、うまくいきません。解決法をご存知の方がいらっしゃいましたら、ご教授ください。よろしくお願いいたします。

Uncaught TypeError: v.pause is not a function

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="css/back1.css">
7    <link rel="stylesheet" href="css/modal.css">
8    <title>Document</title>
9</head>
10<body>
11    <div class="participants" id="app">
12            <div class="participant samplemodal-open">
13                <div class="left"><img v-bind:src="participants.imgsrc" alt="" class="participant-image"></div>
14                <div class="right">
15                    <p class="participant-belonging">{{participants.belonging}}</p>
16                    <p class="participant-name">{{participants.name}}</p>
17                    <p class="message">{{participants.message}}</p>
18                </div>
19            </div>
20            <div id="sampleModal" class="samplemodal">
21                <div class="samplemodal-wrap">
22                    <div class="samplemodal-bg"></div>
23                    <div class="samplemodal-box">
24                        <div class="inner">
25                            <iframe width="640" height="360" v-bind:src="participants.moviesrc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="movie"></iframe>
26                        </div>
27                    </div>
28                </div>
29            </div>
30        </div>
31    </div>
32    
33    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
34    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
35    <script type="text/javascript" src="js/modal.js"></script>
36    <script type="text/javascript" src="js/test.js"></script>
37</body>
38</html>

js
1//test.js
2var app = new Vue({
3    el: '#app',
4    data:{
5        participants:
6            {
7            belonging:'A高校',
8            name:'太郎',
9            message:'こんにちは。',
10            imgsrc:'test.jpg',
11            moviesrc:'https://www.youtube.com/embed/9MjAJSoaoSo'
12            },
13    },
14});

js
1//modal.js
2$(function() {
3    $('.samplemodal-open').click(function(){
4     $('#sampleModal').fadeIn();
5     $('html').addClass('modalset');
6    });
7    $('.samplemodal .samplemodal-bg,.samplemodal .samplemodal-close').click(function(){
8     $('#sampleModal').fadeOut();
9     $('html').removeClass('modalset');
10    });
11   });
12
13   function Pause(){
14    var v = document.getElementsByClassName('movie');
15    v.pause();
16    };
17
18  $(document).on('click',function(e) {
19    if(!$(e.target).closest('.movie').length) {
20      // ターゲット要素の外側をクリックした時の操作
21      Pause();
22    } else {
23      // ターゲット要素をクリックした時の操作
24    }
25 });

kuma_kuma_

2020/10/05 01:14

> モーダルウィンドウ上で再生されている動画を、動画以外の場所を押した時に停止したい。逆に動画の箇所を押した場合停止させたくないのですか？

lacco

2020/10/05 04:07

ご質問ありがとうございます。情報不足ですみません。動画の箇所を押した場合も停止させたい（現状停止しているのでその点は大丈夫かと思っております）です。

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

回答4件

自己解決

こちらのサイトを参考にさせていただきました。
https://kata-tip.com/demo-youtube/01/

また、vue.jsとjQueryの共存はよろしくないようです。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="css/back1.css">
7    <link rel="stylesheet" href="css/modal.css">
8    <title>Document</title>
9</head>
10<body>
11    <div class="participants" id="app">
12            <div class="participant play">
13                <div class="left"><img src="image/151.png" alt="" class="participant-image"></div>
14                <div class="right">
15                    <p class="participant-belonging">Akoukou</p>
16                    <p class="participant-name">tanaka</p>
17                    <p class="message">aaaaaaaaa</p>
18                </div>
19            </div>
20            <div class="movie-modal">
21                <div class="modal-box">
22                  <div class="modal-inner">
23                   <div class="movie"><iframe id="player" width="640" height="360" src="https://www.youtube.com/embed/gvWTsHTxUzs?rel=0&loop=1&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe></div>
24                </div>
25               </div>
26              </div>
27        </div>
28    </div>
29    
30    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
31    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
32    <script type="text/javascript" src="js/modal.js"></script>
33</body>
34</html>

css
1.wrap {
2    margin: 50px auto 0;
3  }
4  
5  .play {
6    text-align: center;
7    cursor: pointer;
8    font-size: 40px;
9    font-weight: bold;
10  }
11  
12  .movie-modal {
13    position: fixed;
14    left: 0;
15    top: 0;
16    width: 100%;
17    height: 100%;
18    opacity: 0;
19    background-color: rgba(000, 000, 000, 0.96);
20    pointer-events: none;
21    transition: all 0.5s;
22    z-index: 10;
23  }
24  .movie-modal.active {
25    opacity: 1;
26    pointer-events: all;
27  }
28  
29  .modal-box {
30    position: relative;
31    max-width: 600px;
32    width: 100%;
33    height: 100%;
34    margin: 0 auto;
35    z-index: 1;
36  }
37  
38  .modal-inner {
39    position: absolute;
40    top: 50%;
41    width: 100%;
42    transform: translate(0, -50%);
43  }
44  
45  .movie {
46    position: relative;
47    width: 100%;
48    padding-bottom: 56.25%;
49    z-index:30;
50  }
51  
52  .movie iframe {
53    position: absolute;
54    top: 0;
55    left: 0;
56    width: 100%;
57    height: 100%;
58  }
59  
60
61  
62  @media screen and (max-width:640px){
63    .wrap {
64      width: 100%;
65    }
66  }

javascript
1$(function(){
2    $(".play").on("click",function(){
3      $(".movie-modal").addClass("active");
4      $("html").css({"overflow-y":"hidden"});
5      return false;
6    });
7  });
8  
9  var tag = document.createElement('script');
10  tag.src = "https://www.youtube.com/iframe_api";
11  var firstScriptTag = document.getElementsByTagName('script')[0];
12  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
13  var player;
14  function onYouTubeIframeAPIReady() {
15  player = new YT.Player("player",{
16  });
17  }
18
19  $(document).on('click',function(e){
20    if(e.target.class!=='movie'){
21      player.pauseVideo();
22      $(".movie-modal").removeClass("active");
23      $("html").css({"overflow-y":"auto"});
24    }
25  });

投稿2020/10/09 16:58

lacco

総合スコア11

重複投稿してしまいました

投稿2020/10/09 16:53

編集2020/10/10 02:32

lacco

総合スコア11

HTML
1<div class="participants" id="app">

てモーダルの外側だよね？
そうしたら

javascript
1$("#app").on('click',function(e) {
2	var $playerWindow = $('.movie')[0].contentWindow;
3	$playerWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
4});

では？

投稿2020/10/05 04:51

kuma_kuma_

総合スコア2506

lacco

2020/10/09 16:51

返信が遅くなってしまい申し訳ありません。ご回答ありがとうございます。その通りに記述してみたのですが、残念ながらうまくいきませんでした。試行錯誤の末、なんとか自己解決できました。ありがとうございました。

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

動画停止はpause()なので、
この辺をうまくアレンジしてできないでしょうか？

function movplay(num)
{
  var obj = document.getElementById("mv");
  var n = parseInt(num);
  if ( n == 0 )
  {
    obj.play();
  }
  else
  {
    obj.pause();
  }
}

https://www.pazru.net/html5/Video/010.html

投稿2020/10/05 02:18