한국어

Programming

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

단축키

Prev이전 문서

Next다음 문서

ESC닫기

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

단축키

Prev이전 문서

Next다음 문서

ESC닫기

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

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

<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 웹 개발자가 되기 위한 학습 로드맵  twin 2021.03.10 248
18 2021 웹 개발 테크트리 총정리(나는 무엇을 배워야 할까?)  twin 2021.03.10 343
17 marquee 태그 사용법  twin 2020.10.05 2432
» 태그로 유트브를 연결하기  twin 2020.09.11 230
15 자바스크립트 배우기전 꼭 봐야할 영상 | 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js)  twin 2020.06.22 289
14 코딩 배워서 앱, 웹 만들고 싶으신가요? 코딩 공부 순서 정리해드립니다.  twin 2019.09.02 596
13 소스코드 정렬 사이트  twin 2019.08.29 529
12 HTML COLOR 색상표  twin 2019.01.08 1413
11 내맘대로 꾸미는 블로그, 태그연습장을 활용  twin 2019.01.08 714
10 웹표준 & html5 & css 관련 링크  twin 2018.09.06 606
9 5대 웹브라우저, 그 이름과 로고의 의미  twin 2017.06.12 22631
8 Server/Client, IP주소, 포트, Protocol, TCP, UDP  twin 2017.06.08 993
7 네크워크 기본 용어  twin 2017.06.08 558
6 네트워크-내컴퓨터 ip주소 확인하는 법  twin 2017.06.08 986
5 네트워크-IP주소 / Port Number (포트번호)  twin 2017.06.08 1846
4 컴퓨터 네트워크-TCP / UDP   twin 2017.06.08 650
3 HTML & JavaScript & CSS_CSS.pdf 일람표  twin 2017.05.30 831
2 html5 게임 들여다 보기  twin 2017.05.15 566
1 Color CSS name, hex code, or RGB values  twin 2017.05.08 562
Board Pagination Prev 1 Next
/ 1