반응형
유튜브 영상을 블로그나 웹사이트에 넣고 싶을 때
사용하는 임베드(embed) 양식과 그 구성요소에 대한 설명을 아래에 정리해드릴게요.
✅ 유튜브 임베드(embed) 기본 코드
<iframe width="560" height="315" src="https://www.youtube.com/embed/v_2fyB4dj4U" title="Dulce Pontes - Canção do Mar (videoclip oficial)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>
🧩 구성 요소 설명
항목 / 설명
| <iframe> | 다른 사이트(유튜브 등)의 콘텐츠를 내 웹페이지에 표시할 수 있게 해주는 HTML 태그 |
| width="560" / height="315" | 영상의 가로/세로 크기(px). 원하는 비율로 조절 가능 (100%도 가능) |
| src="https://www.youtube.com/embed/영상ID" | 임베드 전용 유튜브 URL. 일반 공유 링크 https://youtu.be/영상ID가 아니라 /embed/영상ID 형식이어야 함 |
| title="..." | 영상의 제목. 시각장애인용 스크린 리더가 읽을 수 있도록 해주는 역할 |
| frameborder="0" | 영상 테두리 없음 설정 (구형 브라우저용 속성, 생략해도 무방) |
| allow="..." | 영상 재생 시 다양한 기능(전체화면, 오토플레이 등)을 허용하는 옵션들 |
| allowfullscreen | 전체 화면 모드를 허용하는 옵션 |
✅ 유튜브 링크 → 임베드 URL로 바꾸는 방법
예:
원래 링크 👉 https://youtu.be/v_2fyB4dj4U
바꾼 링크 👉 https://www.youtube.com/embed/v_2fyB4dj4U
👉 유튜브에서 공유 버튼 → </> 퍼가기 → 자동 생성된 HTML을 복사해도 동일한 결과예요.
🎯 활용 팁
- 티스토리, 워드프레스 등 HTML 편집 모드에서 사용 가능
- 네이버 블로그는 iframe을 막기 때문에 '동영상 추가' 기능 또는 링크+썸네일 방식을 사용해야 합니다
- width="100%" height="auto"로 하면 반응형 디자인에 더 잘 어울립니다
반응형
'영상제작 팁 (편집)' 카테고리의 다른 글
| 초보자도 쉽게 배우는 DaVinci Resolve 효과 적용과 렌더링 완벽 가이드 (2) | 2025.06.21 |
|---|---|
| 영상 퀄리티 UP! 다빈치리졸브 자막과 그래픽 초간단 편집법 (2) | 2025.06.21 |
| DaVinci Resolve 오디오 편집 & 믹싱 완벽 가이드 | 잡음 제거부터 최종 출력까지 (5) | 2025.06.21 |
| 🎬 “스토리가 살아야 영상이 산다!” — 컷 편집 후 스토리 구조 점검 · 장면 재배치 · B-roll 완전 가이드 (1) | 2025.06.20 |
| 영상 색감 완전 정복! 다빈치 리졸브 노드 기반 컬러 그레이딩 & 명도별 활용법 30가지 (2) | 2025.06.20 |