常連

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の併用って可能ですか？

```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
です。

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

### 実現したいこと

pythonで、マップ処理中に例外が発生してしまうのですが、その時の対処方法を知りたいです。


### 前提

やりたいこととしては、CSVの中にyoutubeのアカウント一覧が入っており、それに紐づくデータを出そうとしています。

youtubeのアカウント名に問題があるとき（URLで入ってしまっているなど）、youtube_channel_detailが動かなくなると思うのですが、その場合には無視して処理を続けたいです。

（python初心者のため、コードの汚い部分はご容赦ください）

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

```
Traceback (most recent call last):
  File "...teratail.py", line 24, in <module>
    y3 = list(map(youtube_channel_detail, accounts))
  File "...teratail.py", line 15, in youtube_channel_detail
    return search_response['items'][0]
KeyError: 'items'
```

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

```python
from apiclient.discovery import build

import pandas as pd

import csv

def youtube_channel_detail(channel_id):
    api_service_name = 'youtube'
    api_version = 'v3'
    youtube = build(api_service_name, api_version, developerKey='API_KEY') #APIキーを入れています
    search_response = youtube.channels().list(
        part='snippet,statistics',
        id=channel_id,
    ).execute()
    return search_response['items'][0]

df = pd.read_csv('youtube_2.csv', skipinitialspace=True)


accounts = df.youtube.tolist()
print(accounts)
print(map(youtube_channel_detail, accounts))

y = list(map(youtube_channel_detail, accounts))

list1 = [d.get('id') for d in y]
list2 = [d.get('statistics').get('subscriberCount') for d in y]
dict_from_list = dict(zip(list1, list2))

with open("dict.csv", 'w') as file:
    writer = csv.writer(file)
    for k, v in dict_from_list.items():
        writer.writerow([k, v])
```




pythonにおけるマップ処理中のエラー対応のやり方

### 前提・実現したいこと


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　というエラーがでる

### 前提・実現したいこと

ここで質問して良いのかどうかわかりませんが、どこで質問したら良いのかわからないので教えて下さい。

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の動画を表示させています。
しかし、クローズボタンを押しても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');
    })
  }
}
```

モーダルを閉じたらiframe（youtube動画）の再生を停止したい

### 実現したいこと

ここに実現したいことを箇条書きで書いてください。
- [ ] YouTubeのチャンネルページのバナーの画像を不透明にしたいです。

### 前提

JavaScriptで、YouTubeのサイトが透明になるようにしていたところ、
チャンネルのバナーの画像までもが透明になってしまいました。
バナーの要素の構造が複雑なので、どこが最終的な透明度につながっているのかがわかりません。

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

```
バナーの要素の構造が複雑なので、どこが最終的な透明度につながっているのかがわかりません。
バナーの画像を覆うような透明な要素があり、それを削除するとバナー自体が(透明になるのではなく、そのスペースがつめられてしまうのでおそらく完全に)消えてしまいます。
document.querySelector("ytd-c4-tabbed-header-renderer").style.cssTextがバナーの画像になります。これもまた奇怪で、上記の要素の中ではなく、それを覆う要素の中で画像が宣言(?)されています。
```

### 該当のソースコード
すべての要素を(半)透明にするコードです。
```javascript
document.querySelectorAll("*").forEach(element => {

element.style.setProperty("background-color", "rgba(127, 127, 127, 0.05)", "important");
element.style.setProperty("background", "rgba(127, 127, 127, 0.05)", "important");

});
```

### 試したこと
バナーの構造を見たが、全然何がどうなっているのか分からなかったので、色々やってみましたが、どう調べたらいいか分からなかったので何となくわかったことを「発生している問題」のところに一通り書いておきました…

### 補足情報（FW/ツールのバージョンなど）
サイトの利用経験が浅いので、修正すべき点などありましたご指摘願います。
JavaScriptやCSSなどにも詳しくないので、文章ではなく出来るだけ実行可能なJavaScriptコードを書いていただける方が理解できます。（やりたいことから関数を調べたりすのは難しいが、逆は簡単で、コードの方がまだ理解できるため。）

YouTubeのチャンネルページのバナーの透明度をいじりたい。

素人ですが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」はダミーです。

よろしくお願いいたします。