常連

```json
{
  "kind": "youtube#searchListResponse",
  "etag": "uRO97Nv0_tK0wKA7RkgwR5lbVPs",
  "nextPageToken": "CAUQAA",
  "regionCode": "JP",
  "pageInfo": {
    "totalResults": 15,
    "resultsPerPage": 5
  },
  "items": [
    {
      "kind": "youtube#searchResult",
      "etag": "o1agJNe2xIg2NKbhyeg6BkG-FCE",
      "id": {
        "kind": "youtube#video",
        "videoId": "8IoeXW9bBBc"
      },
      "snippet": {
        "publishedAt": "2020-06-24T09:00:03Z",
        "channelId": "UC2v99T3RRi5NkdhP0ZqdpXA",
        "title": "たい焼き",
        "description": "休日に姉妹で、たい焼きを作って食べるだけのゆる〜〜い動画です。 編集：まりん ◯Instagram まりん♡ @marin_honda → https://www.instagram.com/marin_honda ...",
        "thumbnails": {
          "default": {
            "url": "https://i.ytimg.com/vi/8IoeXW9bBBc/default.jpg",
            "width": 120,
            "height": 90
          },
          "medium": {
            "url": "https://i.ytimg.com/vi/8IoeXW9bBBc/mqdefault.jpg",
            "width": 320,
            "height": 180
          },
          "high": {
            "url": "https://i.ytimg.com/vi/8IoeXW9bBBc/hqdefault.jpg",
            "width": 480,
            "height": 360
          }
        },
        "channelTitle": "本田姉妹やで",
        "liveBroadcastContent": "none",
        "publishTime": "2020-06-24T09:00:03Z"
      }
    },
    {
      "kind": "youtube#searchResult",
      "etag": "QX-Rq-7HjNZreHfPbeZezxhidmQ",
      "id": {
        "kind": "youtube#video",
        "videoId": "2i6nmsg5UBE"
      },
      "snippet": {
        "publishedAt": "2020-06-19T08:30:01Z",
        "channelId": "UC2v99T3RRi5NkdhP0ZqdpXA",
        "title": "なわとび",
        "description": "編集：まりん ◯Instagram まりん♡ @marin_honda → https://www.instagram.com/marin_honda (IMG) みゆ♡ @miyu_honda_official ...",
        "thumbnails": {
          "default": {
            "url": "https://i.ytimg.com/vi/2i6nmsg5UBE/default.jpg",
            "width": 120,
            "height": 90
          },
          "medium": {
            "url": "https://i.ytimg.com/vi/2i6nmsg5UBE/mqdefault.jpg",
            "width": 320,
            "height": 180
          },
          "high": {
            "url": "https://i.ytimg.com/vi/2i6nmsg5UBE/hqdefault.jpg",
            "width": 480,
            "height": 360
          }
        },
        "channelTitle": "本田姉妹やで",
        "liveBroadcastContent": "none",
        "publishTime": "2020-06-19T08:30:01Z"
      }
    },
    {
      "kind": "youtube#searchResult",
      "etag": "1IC-w7hmFhN23cIdx3258OeK1rI",
      "id": {
        "kind": "youtube#video",
        "videoId": "qrb49AvSP5w"
      },
      "snippet": {
        "publishedAt": "2020-07-02T08:30:04Z",
        "channelId": "UC2v99T3RRi5NkdhP0ZqdpXA",
        "title": "タマネギ",
        "description": "練習終わりに、夜ご飯を作りました。いただきまーす！続きの後編は映像のカットだけ終わったのですが、面白くて1人で笑っちゃいます笑笑 オフの日に続きの編集をする ...",
        "thumbnails": {
          "default": {
            "url": "https://i.ytimg.com/vi/qrb49AvSP5w/default.jpg",
            "width": 120,
            "height": 90
          },
          "medium": {
            "url": "https://i.ytimg.com/vi/qrb49AvSP5w/mqdefault.jpg",
            "width": 320,
            "height": 180
          },
          "high": {
            "url": "https://i.ytimg.com/vi/qrb49AvSP5w/hqdefault.jpg",
            "width": 480,
            "height": 360
          }
        },
        "channelTitle": "本田姉妹やで",
        "liveBroadcastContent": "none",
        "publishTime": "2020-07-02T08:30:04Z"
      }
    },
    {
      "kind": "youtube#searchResult",
      "etag": "4LOfWn-JwekxDmAUw4xldu85_aU",
      "id": {
        "kind": "youtube#video",
        "videoId": "GknfoE0ljII"
      },
      "snippet": {
        "publishedAt": "2020-07-07T08:30:00Z",
        "channelId": "UC2v99T3RRi5NkdhP0ZqdpXA",
        "title": "お肉",
        "description": "「タマネギ」の続きです！ 多分ちょっと結構めっちゃ面白いです。 「たい焼き」は紗来、 今回は真凜、 そして次回は望結メインの動画です   お楽しみに〜 編集：まりん ...",
        "thumbnails": {
          "default": {
            "url": "https://i.ytimg.com/vi/GknfoE0ljII/default.jpg",
            "width": 120,
            "height": 90
          },
          "medium": {
            "url": "https://i.ytimg.com/vi/GknfoE0ljII/mqdefault.jpg",
            "width": 320,
            "height": 180
          },
          "high": {
            "url": "https://i.ytimg.com/vi/GknfoE0ljII/hqdefault.jpg",
            "width": 480,
            "height": 360
          }
        },
        "channelTitle": "本田姉妹やで",
        "liveBroadcastContent": "none",
        "publishTime": "2020-07-07T08:30:00Z"
      }
    },
    {
      "kind": "youtube#searchResult",
      "etag": "0U6bJMGJFF8RpuggnBieXqadI_8",
      "id": {
        "kind": "youtube#video",
        "videoId": "pKFiwXt_22Y"
      },
      "snippet": {
        "publishedAt": "2020-07-28T08:30:01Z",
        "channelId": "UC2v99T3RRi5NkdhP0ZqdpXA",
        "title": "望結です",
        "description": "祝・記念すべき初めてのYoutubeっぽい動画」 まだまだ編集初心者ですが、編集画面いっぱいに映る望結の顔が可愛くて楽しくできました。   通常運転とは程遠い毎日です ...",
        "thumbnails": {
          "default": {
            "url": "https://i.ytimg.com/vi/pKFiwXt_22Y/default.jpg",
            "width": 120,
            "height": 90
          },
          "medium": {
            "url": "https://i.ytimg.com/vi/pKFiwXt_22Y/mqdefault.jpg",
            "width": 320,
            "height": 180
          },
          "high": {
            "url": "https://i.ytimg.com/vi/pKFiwXt_22Y/hqdefault.jpg",
            "width": 480,
            "height": 360
          }
        },
        "channelTitle": "本田姉妹やで",
        "liveBroadcastContent": "none",
        "publishTime": "2020-07-28T08:30:01Z"
      }
    }
  ]
}
```
上のように、特定のチャンネルの動画を出力しようと思ったら、totalResults = 15に対し、resultsPerPage = 5となっていて残りの10こが表示することができません。
どのようにしたらよいのでしょうか？

ちなみに検索したurlは、https://www.googleapis.com/youtube/v3/searchpart=snippet&channelId=UC2v99T3RRi5NkdhP0ZqdpXA&key=AIzaSyCO_82OMZjzaIJrBHB1oQIVjHVV7mjs_2g&order=viewCount
です。

結果の次のページに行きたい

### 前提・実現したいこと

ここで質問して良いのかどうかわかりませんが、どこで質問したら良いのかわからないので教えて下さい。

chromeのconsoleタブのエラーが、出てこないようにしたいです。


### 発生している問題・エラーメッセージ

```

Indicate whether a cookie is intended to be set in a cross-site context by specifying its SameSite attribute
Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being set in a cross-site context. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.
Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie is intended to be set in cross-site contexts. Note that only cookies sent over HTTPS may use the Secure attribute.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be set by cross-site requests.

3 cookies
Name	Domain & Path
remote_sid	.youtube.com/
nextId	.www.youtube.com/
requests	.www.youtube.com/
```

### 該当のソースコード

```ここに言語名を入力
ソースコード?
```

### 試したこと

おもにYouTubeを埋め込んでいるページで発生しているのですが、このエラーが表示されるブラウザ、表示されないパソコンがあり、どう対処すれば良いのかわかりません。

キャッシュプラグインを無効にしてみたり、色々やりましたが、やはりYouTubeを埋め込んでいるページのコンソールタブで表示されてしまいます。

しかも、このエラーが出るときと出ないときがあります。

その原因もよくわかりません。

いまchromeでやるとエラーは出ませんでしたが、avast secure browser を使うと、エラーが出ました。Firefoxではまた別のエラーが追加されて表示されました。

また別のブラウザで確認すると、今度は、

Failed to execute ‘postMessage’ on ‘DOMWindow’:のエラーがエンドレスで続いていきます。

これはブラウザによって異なるのでしょうか？

いずれにせよ、直したほうがいいのですよね？

なにをどうすれば直るのでしょうか？

WordpressのYouTubeを埋め込んでいるページだけがこの現象が発生する原因もよくわかりません。

よろしくお願いいたします。



### 補足情報（FW/ツールのバージョンなど）

worpress最新
php7.4

chromeのconsoleタブのエラーが出ないようにしたい

### 最新バージョンのコードでスーパーチャットの情報を取得する

YouTubeのライブ配信から
- [ ] スーパーチャットの投げられた時間
- [ ] スーパーチャットの金額(円・ドル・ユーロ)、コメント内容
これらの情報をExcelもしくはスプレッドシートに出力・保存することができる
上記を実現できるコードを作っていただきたいです。

もしくは、下記のエラーを解決したいです。


### 前提


Python 3.11.1、Visual Studio Coedで動作させたいです。


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

```
PS C:\Users\81804\source\repos\soturontesutttt> & C:/Users/81804/AppData/Local/Programs/Python/Python311/python.exe c:/Users/81804/source/repos/soturontesutttt/supatya.py
Traceback (most recent call last):
  File "c:\Users\81804\source\repos\soturontesutttt\supatya.py", line 2, in <module>
    from pytchat import Extractor, VideoInfo, SuperchatCalculator
ImportError: cannot import name 'Extractor' from 'pytchat' (C:\Users\81804\AppData\Local\Programs\Python\Python311\Lib\site-packages\pytchat\__init__.py)
PS C:\Users\81804\source\repos\soturontesutttt> 
```

### 該当のソースコード

```ここに言語名を入力
from tqdm import tqdm
from pytchat import Extractor, VideoInfo, SuperchatCalculator
import signal

'''
進捗状況を表すプログレスバー
'''
class ProgressBar:
    def __init__(self,total):
        self.total = total*1000
        self.pbar = tqdm(total = self.total, ncols = 80, unit_scale = 1,
            bar_format='{desc}{percentage:3.1f}%|{bar}|'
                       '[{n_fmt:>7}/{total_fmt}]{elapsed}<{remaining}')

    def callback(self, actions, fetched):
        if self.total - fetched < 0:
            fetched = self.total
        self.total -= fetched
        self.pbar.update(fetched)

    def close(self):
        self.pbar.update(self.total)
        self.pbar.close()

    def cancel(self):
        self.pbar.close()

if __name__ == '__main__':
    video_id = "GY-LSsYVpJ4"
    info  = VideoInfo(video_id)
    print('Calculate Superchat: [title] ', info.get_title())    

    # プログレスバーを用意する。
    pbar = ProgressBar(info.get_duration())

    # Extractorの生成
    ex = Extractor(
        video_id,
        callback = pbar.callback,
        div = 10,
        processor = SuperchatCalculator()
    )

    #Ctrl+Cでキャンセルする
    signal.signal(signal.SIGINT,  
        (lambda a, b: ex.cancel()))

    #抽出の実行
    result = ex.extract()

    #集計結果の表示
    pbar.close()
    print(result)

```

### 試したこと

https://github.com/taizan-hokuto/pytchat/wiki/Home_jp
こちらを参照しましたが、だめでした。

### 補足情報

どうぞよろしくお願いいたします。

YouTubeのライブチャットからスーパーチャットを取得する

### 発生している問題
`Newtonsoft.JsonConvert.DeserializeObject`でYouTubeDataAPIv3から返されるJsonをデシリアライズしようとすると、予期しない文字が発見されデシリアライズできない。

### エラーメッセージ
```
Newtonsoft.Json.JsonReaderException: 'After parsing a value an unexpected character was encountered: O. Path 'items[0].snippet.tags[7]', line 55, position 6.'
```

### 該当のソースコード
MainWindow.xaml.cs  (一部省略)
```c#
public static string GetVideoTitle()
{
    string videoId = "IGInsosP0Ac"
    string api = $"https://www.googleapis.com/youtube/v3/videos?part=snippet&id={videoId}&key={googleApiKey}";
    var json = new WebClient().DownloadString(api);
    var ytd = JsonConvert.DeserializeObject<YouTubeDataAPIv3SnippetData>(json);
    string result = ytd.items[0].snippet.title;
    return result;
}
```

YouTubeDataAPIv3SnippetData.cs  (一部省略)
```c#
class YouTubeDataAPIv3SnippetData
{
    public class PageInfo
    {
        public int totalResults { get; set; }
        public int resultsPerPage { get; set; }
    }

    public class Default
    {
        public string url { get; set; }
        public int width { get; set; }
        public int height { get; set; }
    }

    public class Medium
    {
        public string url { get; set; }
        public int width { get; set; }
        public int height { get; set; }
    }

    public class High
    {
        public string url { get; set; }
        public int width { get; set; }
        public int height { get; set; }
    }

    public class Standard
    {
        public string url { get; set; }
        public int width { get; set; }
        public int height { get; set; }
    }

    public class Maxres
    {
        public string url { get; set; }
        public int width { get; set; }
        public int height { get; set; }
    }

    public class Thumbnails
    {
        public Default @default { get; set; }
        public Medium medium { get; set; }
        public High high { get; set; }
        public Standard standard { get; set; }
        public Maxres maxres { get; set; }
    }

    public class Localized
    {
        public string title { get; set; }
        public string description { get; set; }
    }

    public class Snippet
    {
        public DateTime publishedAt { get; set; }
        public string channelId { get; set; }
        public string title { get; set; }
        public string description { get; set; }
        public Thumbnails thumbnails { get; set; }
        public string channelTitle { get; set; }
        public List<string> tags { get; set; }
        public string categoryId { get; set; }
        public string liveBroadcastContent { get; set; }
        public Localized localized { get; set; }
    }

    public class Item
    {
        public string kind { get; set; }
        public string etag { get; set; }
        public string id { get; set; }
        public Snippet snippet { get; set; }
    }

    public string kind { get; set; }
    public string etag { get; set; }
    public PageInfo pageInfo { get; set; }
    public List<Item> items { get; set; }
}
```

YouTubeDataAPIv3から返されるJson
```json
{
 "kind": "youtube#videoListResponse",
 "etag": "\"Bdx4f4ps3xCOOo1WZ91nTLkRZ_c/jwhb_FJuvFIgM29Nxg3M12Z67eM\"",
 "pageInfo": {
  "totalResults": 1,
  "resultsPerPage": 1
 },
 "items": [
  {
   "kind": "youtube#video",
   "etag": "\"Bdx4f4ps3xCOOo1WZ91nTLkRZ_c/CiszAW_8Yo76GYB0bpHxx6-vvf0\"",
   "id": "IGInsosP0Ac",
   "snippet": {
    "publishedAt": "2018-11-23T04:55:15.000Z",
    "channelId": "UCzycs8MqvIY4nXWwS-v4J9g",
    "title": "ONE OK ROCK: Stand Out Fit In [OFFICIAL VIDEO]",
    "description": "ONE OK ROCK's official video for 'Stand Out Fit In’. \nDirected By Peter Huang\n\nSubtitles by Taka and Yasuko Ishida\n\nPre-order Eye Of The Storm today: https://amuse-inc.lnk.to/ONEOKROCK\n\nFind ONE OK ROCK on… \nSite: http://www.oneokrock.com/ \nFacebook: http://smarturl.it/OORfacebook \nTwitter: http://smarturl.it/OORtwitter \nInstagram: http://smarturl.it/OORinstagram \nYouTube: http://smarturl.it/OORyoutube \nSpotify: http://smarturl.it/OORspotify",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/IGInsosP0Ac/default.jpg",
      "width": 120,
      "height": 90
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/IGInsosP0Ac/mqdefault.jpg",
      "width": 320,
      "height": 180
     },
     "high": {
      "url": "https://i.ytimg.com/vi/IGInsosP0Ac/hqdefault.jpg",
      "width": 480,
      "height": 360
     },
     "standard": {
      "url": "https://i.ytimg.com/vi/IGInsosP0Ac/sddefault.jpg",
      "width": 640,
      "height": 480
     },
     "maxres": {
      "url": "https://i.ytimg.com/vi/IGInsosP0Ac/maxresdefault.jpg",
      "width": 1280,
      "height": 720
     }
    },
    "channelTitle": "ONE OK ROCK",
    "tags": [
     "ONE OK ROCK",
     "ワンオク",
     "ワンオクロック",
     "Taka",
     "Toru",
     "Ryota",
     "Tomoya",
     "バンド",
     "OOR",
     "ロック"
    ],
    "categoryId": "10",
    "liveBroadcastContent": "none",
    "localized": {
     "title": "ONE OK ROCK: Stand Out Fit In [OFFICIAL VIDEO]",
     "description": "ONE OK ROCK's official video for 'Stand Out Fit In’. \nDirected By Peter Huang\n\nSubtitles by Taka and Yasuko Ishida\n\nPre-order Eye Of The Storm today: https://amuse-inc.lnk.to/ONEOKROCK\n\nFind ONE OK ROCK on… \nSite: http://www.oneokrock.com/ \nFacebook: http://smarturl.it/OORfacebook \nTwitter: http://smarturl.it/OORtwitter \nInstagram: http://smarturl.it/OORinstagram \nYouTube: http://smarturl.it/OORyoutube \nSpotify: http://smarturl.it/OORspotify"
    }
   }
  }
 ]
}
```

###試したこと・気付いたこと
動画のIDを変えるとできました。一部の動画で例外が発生するようです。
**[追伸]** 色々試したところ`"tags"`に日本語が用いられているJsonファイルだとこのエラーが発生するようです。

###環境
- Framework4.7.2
- Windows10 Pro 64bit ver.1809 build.17763.615
- Newtonsoft.Json ver.12.0.0.0

[C#, Json.NET] デシリアライズで予期しない文字が発見されエラー。

### 前提・実現したいこと


youtube-dlで公開設定にしているプレイリストを約2500本余りの動画をコマンドプロンプトにはりつけて落とそうとしたら何個か落とせたのち、エラーが出まして一つも何も進まなくなりました。どうにかして最高設定の動画をダウンロードしたい。
### 発生している問題・エラーメッセージ

```
ERROR: unable to download video data: HTTP Error 403: Forbidden
```
ERROR: unable to download video data: HTTP Error 403: Forbidden
### 該当のソースコード

```ここに言語名を入力
ソースコード
```
![イメージ説明](b482a65e2a9a01243fc91bb284c895e6.jpeg)
### 試したこと
エラーコードをそのままコピペ英語のサイトにおそらくのってるであろうが、翻訳かけると
理解しがたい翻訳が返ってきて苦戦しています。ログイン情報を入れると何か変わるかと思い、それらしきものを下記で打ったのですがうまくいかずじまい
積んでしまいました。
1つ目

`youtube-dl -u USERNAME -p PASSWORD URL; do continue; done`
2つ目
```E:\downloads\youtube-dl> youtube-dl -f bestvideo+bestaudio --merge-output-format mp4 --sub-lang en --write-sub https://www.youtube.com/playlist?list=PLhdy1vVqqgiwWb7qgNQGc-Xs8Alf8Zxat
```
と打ってエラーが出ました。どなたか同じようなエラーが生じた方お力お貸しください。
[リンク]https://blog.withachristianwife.com/2019/10/14/download-nicocino-with-youtubedl/


### 補足情報（FW/ツールのバージョンなど）
3.24 2020の　youtube-dl ffmpegも最新
ここにより詳細な情報を記載してください。

youtube-dl　コマンドプロンプト　ERROR: unable to download video data: HTTP Error 403: Forbidden　というエラーがでる

youtubeに限った話ではないのですが・・・

[リンク内容](https://teratail.com/questions/64237)
こちらの質問のmaisumakunさんのコメントで「QUIC」と出てきますが、これで思ったのですが、、、

#Youtubeってhttps(TCP)で、尚且つUDPの動画ストリーミングってどういうことでしょうか？？

youtubeはgoogleが運営しているのではないのであれば、QUICは使用されていないと考えているのですが、、、
TCPとUDPの併用が可能なのでしょうか？？

英語なのですが、以下のようなものを見つけました。
[Youtube use tcp or udp?](https://www.crazyengineers.com/threads/youtube-use-tcp-or-udp.38419/)

英語があまり得意ではないのですが
flsha player とRTSPというプロトコルで実現しているの・・・かな？
RTSPはアプリケーション層に存在するプロトコルだそうですが・・・

こちらはUDPは使用されていないということでしょうか？？
ストリーミングの実現はUDP以外でも可能なら、このプロトコルいらないような気がしますが・・・
(結構悪用されてますし・・・)
Google chrome ではflash playerなしでyoutubeを再生できる。こちらはQUICという技術のおかげでしょうか？

教えてください。

> [追記]

同一層のプロトコルの併用が可能かどうかはトランスポート層に限った話ではありませんでしたね。
RTSPはアプリケーション層に存在するプロトコルという時点で、HTTPと併用しているようにも見えます。

UDPとTCPの併用って可能ですか？

素人ですがwordpressでホームページを作成しております。

動画ギャラリーとして、動画のキャプチャ画像をクリックすると
モダールウインドウが開きその中に
「iframeでyoutubeの埋め込み＋説明」が表示されるようjqueryを使用し作成しました。

見た目は問題ないのですが、
１、モダールウインドウを閉じても音声が消えない（動画も再生され続けているよう）
２、別の動画を再生すると音声が二重で流れる
ことに困っています。

http://www.webdesignleaves.com/wp/jquery/625/

上記等を参考にし.remove();を用いてみたのですが

モダールウインドウを閉じると同時にyoutubeが終了（youtubeの埋め込み自体が消える）ため音声は消えますが、
再び同じ動画を見ようとモダールウインドウを開いてもyoutubeの埋め込みが非表示となり２回目の閲覧ができません。

・モダールウインドウを閉じると同時にyoutubeの再生を停止する
もしくは
・別の動画が流れ出した時点で、先に流れていた動画を停止する

方法がありましたらご教授下さい。


【現在のソースコード】

```ここに言語を入力
<STYLE TYPE="text/css">


span {
   display:none;
}
.modal-content {
	width: 910px ;
	height: 360px ;
	margin: 0 ;
	padding: 20px 20px ;
	border: 0px solid #aaa ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 2 ;
}
  
#modal-overlay {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 255,255,255, 0.75 ) ;
}


.button-link {
	color: #00f ;
	text-decoration: underline ;
}
 
.button-link:hover {
	cursor: pointer ;
	color: #f00 ;
}

</STYLE>






<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>

$(function(){


//グローバル変数
var nowModalSyncer = null ;		//現在開かれているモーダルコンテンツ
var modalClassSyncer = "modal-syncer" ;		//モーダルを開くリンクに付けるクラス名

//モーダルのリンクを取得する
var modals = document.getElementsByClassName( modalClassSyncer ) ;

//モーダルウィンドウを出現させるクリックイベント
for(var i=0,l=modals.length; l>i; i++){

	//全てのリンクにタッチイベントを設定する
	modals[i].onclick = function(){

		//ボタンからフォーカスを外す
		this.blur() ;

		//ターゲットとなるコンテンツを確認
		var target = this.getAttribute( "data-target" ) ;

		//ターゲットが存在しなければ終了
		if( typeof( target )=="undefined" || !target || target==null ){
			return false ;
		}

		//コンテンツとなる要素を取得
		nowModalSyncer = document.getElementById( target ) ;

		//ターゲットが存在しなければ終了
		if( nowModalSyncer == null ){
			return false ;
		}

		//キーボード操作などにより、オーバーレイが多重起動するのを防止する
		if( $( "#modal-overlay" )[0] ) return false ;		//新しくモーダルウィンドウを起動しない
		//if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;		//現在のモーダルウィンドウを削除して新しく起動する

		//オーバーレイを出現させる
		$( "body" ).append( '<div id="modal-overlay"></div>' ) ;
		$( "#modal-overlay" ).fadeIn( "fast" ) ;

		//コンテンツをセンタリングする
		centeringModalSyncer() ;

		//コンテンツをフェードインする
		$( nowModalSyncer ).fadeIn( "slow" ) ;


		//[#modal-overlay]、または[#modal-close]をクリックしたら…
		$( "#modal-overlay,#modal-close" ).unbind().click( function() {


			//[#modal-content]と[#modal-overlay]をフェードアウトした後に…
			$( "#" + target + ",#modal-overlay" ).fadeOut( "fast" , function() {




				//[#modal-overlay]を削除する
				$( '#modal-overlay' ).remove() ;



			} ) ;


			//現在のコンテンツ情報を削除
			nowModalSyncer = null ;

		} ) ;

	}

}


	//リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
	$( window ).resize( centeringModalSyncer ) ;

	//センタリングを実行する関数
	function centeringModalSyncer() {

		//モーダルウィンドウが開いてなければ終了
		if( nowModalSyncer == null ) return false ;

		//画面(ウィンドウ)の幅、高さを取得
		var w = $( window ).width() ;
		var h = $( window ).height() ;

		//コンテンツ(#modal-content)の幅、高さを取得
		// jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
//		var cw = $( nowModalSyncer ).outerWidth( {margin:true} ) ;
//		var ch = $( nowModalSyncer ).outerHeight( {margin:true} ) ;
		var cw = $( nowModalSyncer ).outerWidth() ;
		var ch = $( nowModalSyncer ).outerHeight() ;

		//センタリングを実行する
		$( nowModalSyncer ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;

	}

} ) ;

 


</script>


<br><br>


<div id="modal-content-01" class="modal-content">
	
	<p><iframe src="https://www.youtube.com/embed/aaa" width="512" height="288" align="left" frameborder="0" id="vimeoPlayer_01" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display: block;" padding_right="10"></iframe><img src="説明文書画像" alt="0" width="350" height="283" size-full wp-image-117"/></p>
	<p><a id="modal-close" class="button-link"><img src="閉じるボタン"/></a><br></p>

</div>



<div id="modal-content-02" class="modal-content">
	
	<p><iframe src="https://www.youtube.com/embed/bbb" width="512" height="288" align="left" frameborder="0" id="vimeoPlayer_01" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display: block;" padding_right="10"></iframe><img src="説明文書画像" alt="1" width="350" height="283" size-full wp-image-118" /></p>
	<p><a id="modal-close" class="button-link"><img src="閉じるボタン"/></a><br></p>

</div>



<div id="modal-content-03" class="modal-content">
	
	<p><iframe src="https://www.youtube.com/embed/ccc" width="512" height="288" align="left" frameborder="0" id="vimeoPlayer_01" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display: block;" padding_right="10"></iframe><img src="説明文書画像" alt="2" width="350" height="283" size-full wp-image-119" />
</p>
	<p><a id="modal-close" class="button-link"><img src="閉じるボタン"/></a><br></p>

</div>



<div id="modal-content-04" class="modal-content">
	
	<p><iframe src="https://www.youtube.com/embed/ddd" width="512" height="288" align="left" frameborder="0" id="vimeoPlayer_01" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display: block;" padding_right="10"></iframe><img src="説明文書画像" alt="3" width="350" height="283" size-full wp-image-120" />
</p>
	<p><a id="modal-close" class="button-link"><img src="閉じるボタン"/></a><br></p>
	
</div>





<table><tr><td>
<p><a class="modal-syncer button-link" data-target="modal-content-01"><img src="動画キャプチャ"></a></p>
</td><td>
<p><a class="modal-syncer button-link" data-target="modal-content-02"><img src="動画キャプチャ"></a></p>
</td></tr><tr><td>
<p><a class="modal-syncer button-link" data-target="modal-content-03"><img src="動画キャプチャ"></a></p>
</td><td>
<p><a class="modal-syncer button-link" data-target="modal-content-04"><img src="動画キャプチャ"></a></p>
</td></tr></table>
```



以上です。


ネットで調べながら書き加えていきましたので、めちゃくちゃかと思います。
「画像」「埋め込みURL」はダミーです。

よろしくお願いいたします。

jquery モダールウインドウを閉じると同時にyoutubeを停止したい。

現在、トップページにアクセスすると強制的にモーダルを表示させ、中にはyoutubeの動画を表示させています。
しかし、クローズボタンを押してもyoutubeの再生が止まらない状況です。
クローズボタンを押すと、youtubeの再生も停止させたいのですが、どなたかご教示いただけないでしょうか。

HTML：
```
<div class="popup" id="js-popup">
  <div class="popup-inner">
    <div class="close-btn" id="js-close-btn"><i class="fas fa-times"></i></div>
    <iframe width="100%" height="315" src="youtubeの動画URL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="black-background" id="js-black-bg"></div>
</div>
```

JS：
```
window.onload = function() {
  var popup = document.getElementById('js-popup');
  if(!popup) return;
  popup.classList.add('is-show');

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('js-close-btn');

  closePopUp(blackBg);
  closePopUp(closeBtn);

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      popup.classList.remove('is-show');
    })
  }
}
```