<!-- 비디오 모달 템플릿 -->
<div class="modal video">
  <div class="modal-content">
    <div class="modal-body">
      <div class="video-contents">
        <div class="video-area">
          <div class="video-box">
            <iframe
              id="videoFrame"
              width="100%"
              height="100%"
              src=""
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
            >
            </iframe>
          </div>
        </div>
        <div class="video-info">
          <div class="tit-box">
            <div class="meta">
              <span>인사이트</span>
              <em>경제와사회</em>
            </div>
            <h3>회계를 조금이라도 이해하면 인생이 달라지는 이유</h3>
          </div>
          <div class="desc">
            메타버스 시대가 열리며 우리의 삶과 정체성이 디지털 중심으로 재편되고
            있습니다.<br />
            이 변화는 새로운 기회와 동시에 사회적·윤리적 과제도 함께 가져옵니다.
          </div>
        </div>
      </div>
      <div class="video-side">
        <div class="video-header">
          <h5 class="tit">추천강의</h5>
          <span class="badge">소통</span>
          <span class="close">&times;</span>
        </div>
        <div class="video-list">
          <ul>
            <li>
              <a href="#" class="list" data-video-id="">
                <div class="thumb">
                  <img
                    src="/img/video/img_thumb_01.png"
                  />
                </div>
                <div class="txt-box">
                  <div class="category insight">인사이트</div>
                  <div class="title">
                    아동학개 신고의무자 및 공공부문 종사자 아동학대
                    예방교육(공통편)
                  </div>
                </div>
              </a>
            </li>

            <li>
              <a href="#" class="list" data-video-id="${video.id}">
                <div class="thumb">
                  <img
                  src="/img/video/img_thumb_02.png"
                  />
                </div>
                <div class="txt-box">
                  <div class="category leader">리더십</div>
                  <div class="title">
                    아동학개 신고의무자 및 공공부문 종사자 아동학대
                    예방교육(공통편)
                  </div>
                </div>
              </a>
            </li>

            <li>
              <a href="#" class="list" data-video-id="${video.id}">
                <div class="thumb">
                  <img
                  src="/img/video/img_thumb_03.png"
                  />
                </div>
                <div class="txt-box">
                  <div class="category leader">인사이트</div>
                  <div class="title">
                    인류학자의 비밀노트, 빅데이터도 모르는 인간 욕망의 진실
                    (백영재 인류학자의 비밀노트,빅데이터도 모르는 인간 욕망의
                    진실)
                  </div>
                </div>
              </a>
            </li>

            <li>
              <a href="#" class="list" data-video-id="${video.id}">
                <div class="thumb">
                  <img
                  src="/img/video/img_thumb_04.png"
                  />
                </div>
                <div class="txt-box">
                  <div class="category leader">인사이트</div>
                  <div class="title">
                    인류학자의 비밀노트, 빅데이터도 모르는 인간 욕망의 진실
                    (백영재 인류학자의 비밀노트,빅데이터도 모르는 인간 욕망의
                    진실)
                  </div>
                </div>
              </a>
            </li>

            <li>
              <a href="#" class="list" data-video-id="${video.id}">
                <div class="thumb">
                  <img
                  src="/img/video/img_thumb_05.png"
                  />
                </div>
                <div class="txt-box">
                  <div class="category leader">인사이트</div>
                  <div class="title">
                    인류학자의 비밀노트, 빅데이터도 모르는 인간 욕망의 진실
                    (백영재 인류학자의 비밀노트,빅데이터도 모르는 인간 욕망의
                    진실)
                  </div>
                </div>
              </a>
            </li>

            <li>
              <a href="#" class="list" data-video-id="${video.id}">
                <div class="thumb">
                  <img
                  src="/img/video/img_thumb_06.png"
                  />
                </div>
                <div class="txt-box">
                  <div class="category leader">인사이트</div>
                  <div class="title">
                    인류학자의 비밀노트, 빅데이터도 모르는 인간 욕망의 진실
                    (백영재 인류학자의 비밀노트,빅데이터도 모르는 인간 욕망의
                    진실)
                  </div>
                </div>
              </a>
            </li>

            <li>
              <a href="#" class="list" data-video-id="${video.id}">
                <div class="thumb">
                  <img
                  src="/img/video/img_thumb_07.png"
                  />
                </div>
                <div class="txt-box">
                  <div class="category leader">인사이트</div>
                  <div class="title">
                    인류학자의 비밀노트, 빅데이터도 모르는 인간 욕망의 진실
                    (백영재 인류학자의 비밀노트,빅데이터도 모르는 인간 욕망의
                    진실)
                  </div>
                </div>
              </a>
            </li>

            <li>
              <a href="#" class="list" data-video-id="${video.id}">
                <div class="thumb">
                  <img
                  src="/img/video/img_thumb_01.png"
                  />
                </div>
                <div class="txt-box">
                  <div class="category leader">인사이트</div>
                  <div class="title">
                    인류학자의 비밀노트, 빅데이터도 모르는 인간 욕망의 진실
                    (백영재 인류학자의 비밀노트,빅데이터도 모르는 인간 욕망의
                    진실)
                  </div>
                </div>
              </a>
            </li>

            <li>
              <a href="#" class="list" data-video-id="${video.id}">
                <div class="thumb">
                  <img
                  src="/img/video/img_thumb_02.png"
                  />
                </div>
                <div class="txt-box">
                  <div class="category leader">인사이트</div>
                  <div class="title">
                    인류학자의 비밀노트, 빅데이터도 모르는 인간 욕망의 진실
                    (백영재 인류학자의 비밀노트,빅데이터도 모르는 인간 욕망의
                    진실)
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>

        <div class="comment-wrap">
          <!-- 댓글 입력 -->
          <div class="comment-box">
            <textarea placeholder="댓글을 작성해주세요"></textarea>
            <div class="btn-area">
              <button class="btn-cancel" disabled>취소</button>
              <button class="btn-save" disabled>작성</button>
            </div>
          </div>
          <!-- // 댓글 입력 -->
        </div>
      </div>
    </div>
  </div>
</div>
