한국어

Programming

twin 주소복사
조회 수 38 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

몇몇 옵션은 모바일 기기 지원을 위한 속성들이므로 반응형 웹이나 모바일 웹을 지원해야할 경우 해당 옵션들을 넣어주는 것이 좋습니다.

<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="" 도 동일함)

 


List of Articles
번호 제목 글쓴이 날짜 조회 수
19 2021 웹 개발 테크트리 총정리(나는 무엇을 배워야 할까?)  twin 2021.03.10 74
18 5대 웹브라우저, 그 이름과 로고의 의미  twin 2017.06.12 3402
17 Color CSS name, hex code, or RGB values  twin 2017.05.08 379
16 HTML & JavaScript & CSS_CSS.pdf 일람표  twin 2017.05.30 531
15 HTML COLOR 색상표  twin 2019.01.08 571
14 html5 게임 들여다 보기  twin 2017.05.15 385
13 marquee 태그 사용법  twin 2020.10.05 486
12 Server/Client, IP주소, 포트, Protocol, TCP, UDP  twin 2017.06.08 768
11 내맘대로 꾸미는 블로그, 태그연습장을 활용  twin 2019.01.08 473
10 네크워크 기본 용어  twin 2017.06.08 382
9 네트워크-IP주소 / Port Number (포트번호)  twin 2017.06.08 1363
8 네트워크-내컴퓨터 ip주소 확인하는 법  twin 2017.06.08 695
7 소스코드 정렬 사이트  twin 2019.08.29 303
6 웹 개발자가 되기 위한 학습 로드맵  twin 2021.03.10 40
5 웹표준 & html5 & css 관련 링크  twin 2018.09.06 405
4 자바스크립트 배우기전 꼭 봐야할 영상 | 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js)  twin 2020.06.22 101
3 컴퓨터 네트워크-TCP / UDP   twin 2017.06.08 473
2 코딩 배워서 앱, 웹 만들고 싶으신가요? 코딩 공부 순서 정리해드립니다.  twin 2019.09.02 393
» 태그로 유트브를 연결하기  twin 2020.09.11 38
Board Pagination Prev 1 Next
/ 1