몇몇 옵션은 모바일 기기 지원을 위한 속성들이므로 반응형 웹이나 모바일 웹을 지원해야할 경우 해당 옵션들을 넣어주는 것이 좋습니다.
<iframe width="1591" height="905" src="https://www.youtube.com/embed/oRmsrT7Ubd0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
유튜브 동영상 연결에 사용하는 전용 태그 속성들을 조금 더 자세히 살펴보겠습니다.
|
속성 |
값 |
설명 |
|
width |
픽셀, %값으로 너비 지정 가능(100%면 웹브라우저 화면 전체 너비) |
|
|
height |
픽셀, %값으로 너비 지정 가능(100%면 웹브라우저 뷰포트 전체 높이) |
|
|
src |
동영상 경로 URL |
|
|
frameborder |
영상 테두리. 0또는 1만 가능 0이면 테두리 없음. 1이면 입체테두리 생성. |
HTML5 표준에서 제외됨. |
|
allow |
accelerometer : 스마트폰같은 가속도센서 지원 기기에서 가로세로 전환 자동 지원 autoplay : 자동재생 지원. URL뒤에 "?autoplay=1" 을 추가로 붙여야 동작 encrypted-media : 암호화된 영상 재생 지원. picture-in-picture : 스마트폰에서 떠있는 작은화면으로 동영상 재생 지원 |
유튜브 전용 속성 |
|
allowfullscreen |
allowfullscreen |
속성이 있으면 풀화면 재생 버튼 활성화. 없으면 비활성화(또는 allowfullscreen="" 도 동일함) |