YouTube 영상을 iframe으로 삽입할 때 필요한 속성을 배웁니다.
공유 URL이 아니라 embed URL을 iframe의 src에 사용합니다. title을 작성하고 allow와 allowfullscreen은 필요한 기능만 허용합니다. 개인정보 보호 강화 도메인을 선택할 수도 있습니다.
바깥 div.video의 aspect-ratio: 16/9가 폭에 맞춰 높이를 계산하고, 안쪽 iframe은 width와 height를 100%로 주어 그 상자를 꽉 채웁니다. 실제 영상 대신 srcdoc으로 만든 작은 문서가 들어 있어 body의 어두운 배경이 틀 전체에 칠해지고 YouTube embed 영역이라는 글자가 표시됩니다. border: 0은 iframe의 기본 테두리를 없앱니다.
실제 삽입 주소는 youtube.com/embed/ 뒤에 영상 ID를 붙인 형태이고, start=90 같은 쿼리 매개변수를 더하면 90초 지점부터 재생됩니다. 영상이 첫 화면 아래에 있다면 iframe에 loading=lazy를 주어 스크롤이 가까워질 때까지 플레이어 문서를 불러오지 않게 하면 첫 화면이 가벼워집니다.
영상 제목과 무관한 title을 쓰면 화면 읽기 사용자가 내용을 알기 어렵습니다.
직접 바꿔보세요실제 영상 ID가 있다고 가정하고 개인정보 보호 embed URL을 작성하세요.