[HTML]유튜브 영상 첨부하기

유수종·2025년 2월 12일

프론트엔드 스터디

목록 보기
12/12

HTML을 학습하면서 video 태그로 동영상을 삽입해본적이 있는데요, 그렇다면 이런 유튜브 영상은 어떻게 삽입하는 걸까요?

방법은 의외로 간단합니다.

먼저 유튜브에서 원하는 영상을 선택합니다.

선택한 영상에서 공유를 클릭합니다.

여기서 퍼가기를 클릭하면 아래와 같은 정보가 나옵니다.

안에 있는 <iframe> 태그를 모두 복사해줍니다.

<div class="video-container">
            <iframe
              width="560"
              height="315"
              src="https://www.youtube.com/embed/rA2DrGkxMSY?si=9qtfZrhKzUp9lZ-e"
              title="YouTube video player"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerpolicy="strict-origin-when-cross-origin"
              allowfullscreen
            ></iframe>
          </div>

복사후 이렇게 div 태그나 다른 태그를 통해 삽입해줄 수 있습니다.

사실 다른 태그를 추가로 사용하지 않아도 영상이 그냥 삽입되는데요, 벨로그는 마크다운 양식이기 때문에 유튜브에서 복사한 <iframe> 태그를 그냥 복사만해줘도

이렇게 영상이 첨부됩니다.

0개의 댓글