サムネイルをクリックしたときにYOUTUBE動画が大きく表示されるようにしたい

■■■　実現したいこと　■■■
右側のサムネイルをクリックしたときに、左の領域にYOUTUBE動画が表示されるようにしたいです。

■■■　起きている不具合　■■■
画像ファイルで作った場合は下記のHTMLコードのようになり問題なく右のサムネイルに関連した画像が左の領域に大きく表示されるのですが、サムネイルクリック時にYOUTUBE動画を表示する方法がどうしてもわかりません。

■■■　試してみたこと　■■■
YOUTUBEの「共有」で取得した<iframe>のコードをOnclickに設置してみましたが、うまくいきませんでした。どなたかご教示くださいますようお願いいたします。

html
1			<div class="ta_center">
2				<div class="float_left">
3					<img src="./images/pic01.jpg" class="main_frame" name="BigPhoto" width="790"><br><br><br>
4				</div>
5				<div class="video_flex_box_thumbnail float_left">
6					<img src="./images/s_pic01.jpg" Onclick="document.BigPhoto.src='./images/pic01.jpg'" width="200">
7					<img src="./images/s_pic02.jpg" Onclick="document.BigPhoto.src='./images/pic02.jpg'" width="200">
8					<img src="./images/s_pic03.jpg" Onclick="document.BigPhoto.src='./images/pic03.jpg'" width="200">
9					<img src="./images/s_pic04.jpg" Onclick="document.BigPhoto.src='./images/pic04.jpg'" width="200"><br>
10				</div>
11			</div>
12		<div class="clear_both"></div>

css
1img.main_frame{
2	border:solid 3.5px #000;
3}
4.video_flex_box_thumbnail{
5	display:flex;
6	flex-direction:column;
7	justify-content:center;
8	align-items:center;
9}
10.float_left{
11	float:left;
12}
13.clear_both{
14	clear:both;
15}
16.ta_center{
17	text-align:center;
18	margin:auto;
19}