** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요.
https://www.youtube.com/watch?v=VVVmPjnqT8U
1. youtube영상을 HTML에 넣기
1) 유튜브 사이트에 접속
YouTube
www.youtube.com
2) 원하는 영상을 선택
- 원하는 영상을 찾아 클릭한다.
3) 영상의 공유버튼 클릭
- 영상의 하단쪽에 있는 공유버튼을 클릭한다.
4) 새로 뜨는 대화상자의 [퍼가기버튼] 클릭
- 빨간색으로 체크한 퍼가기 버튼을 클릭
5) 보이는 iframe태그를 드래그해서 복사한다.
- 빨간색으로 체크한 <iframe>태그를 복사한다.
6) 현재 작성하는 html문서에 붙여넣기 한다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>유튜브 영상 넣기</title>
<style type="text/css">
</style>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/iDjQSdN_ig8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
7) 코드 완성 뷰
2. youtube영상 옵션
- 옵션은 주소의 매개변수(파라미터)로 작성
- 추가적으로 매개변수 넣을 때는 &를 사용
<iframe width="560" height="315" src="영상주소?매개변수=값"></iframe>
| 매개변수 | 설명 | 값표시 |
| autoplay | 영상 자동재생 - 최근에는 소리도 제거해야 자동재생 | 값은 0(비활성화) 혹은 1(활성화)로 표시 |
| mute | 음소거 | 값은 0(비활성화) 혹은 1(활성화)로 표시 |
| loop | 반복재생 | 값은 0(비활성화) 혹은 1(활성화)로 표시 |
| controls | 컨트롤바 | 값은 0(비활성화) 혹은 1(활성화)로 표시 |
| cc_load_policy | 자막설정 - 사용자설정값과 관련없이 무조건 보임 | 값은 0(비활성화) 혹은 1(활성화)로 표시 |
| start | 동영상에 재생될 시간을 설정 | 예시 원하는 시작 시간이 6분 30초면 초로 계산 390을 넣어 주면 됨 |
3. youtube영상 자동재생
- 자동 재생하려면 음소거를 반드시 같이 해줘야 함
1) 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>유튜브 영상 넣기</title>
<style type="text/css">
</style>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/iDjQSdN_ig8?autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>- src의 값인 주소 뒤에 ?autoplay=1&mute=1 를 추가
2) 코드 완성 뷰
- 영상이 바로 재생되는 것을 확인할 수 있다.
4. iframe태그 속성
| 속성명 | 설명 |
| src | 아이프레임에 들어올 외부페이지 경로를 작성하는 속성 |
| width | 아이프레임의 가로폭 설정 |
| height | 아이프레임의 세로 높이 설정 |
| name | 아이프레임의 이름을 지정 - 추후 페이지 이동이 될 때 target으로 설정 가능 |
| frameborder | 아이프레임의 테두리 설정 - 웹표준에 어긋나므로 CSS에서 대체 |
| scrolling | 아이프레임의 외부페이지가 더 클때 스크롤바가 생성되는 속성 - 웹표준에 어긋나므로 CSS에서 대체 |
5. 외부페이지를 iframe으로 가져오기
첨부이미지
1) 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>아이프레임 태그</title>
<style type="text/css">
.mobile{
width: 656px; height: 1280px;
padding: 230px 51px 228px 58px; box-sizing: border-box;
background-image: url(mobile.png);
}
</style>
</head>
<body>
<div class="mobile">
<iframe src="https://www.hsd.co.kr/" width="547" height="823" frameborder="0"></iframe>
</div>
</body>
</html>- iframe에 한솥도시락 반응형웹페이지를 넣으면 모바일 상태로 보이게 된다.
2) 코드 완성 뷰
6. name 속성을 이용해서 페이지 이동(target의 값으로 처리)
- iframe에 name속성이 이름을 지정하고 a태그의 target에 그 이름을 값을 작성하면 그 페이지가 iframe내부에서 보인다.
1) 코드
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>아이프레임 태그</title>
<style type="text/css">
.mobile{
width: 656px; height: 1280px;
padding: 230px 51px 228px 58px; box-sizing: border-box;
background-image: url(mobile.png);
}
</style>
</head>
<body>
<div class="mobile">
<iframe src="https://www.hsd.co.kr/" width="547" height="823" frameborder="0" name="mobilebox"></iframe>
</div>
<a href="https://kellogg.co.kr/Index" target="mobilebox">농심 켈로그 바로가기</a>
</body>
</html>- iframe태그에 name="mobilebox"를 추가
- div 태그 아래에 a태그를 추가 - 이때 중요한 것은 target="mobilebox"라고 같은 값으로 지정
2) 코드 완성 뷰
- 아래 농심 켈로그 바로가기를 클릭하면 페이지가 아이프레임에서 바뀌는 것을 확인할 수 있다.
7. 웹표준 검사기에서의 오류
- frameborder, scrolling은 html5에서 오류가 있는 웹표준
- frameborder는 해당 아이프레임이 있는 페이지에서 스타일에 iframe{ border: none; } 처리
- scrolling은 자손 페이지의 스타일에 html{ overflow: hidden; }을 처리
자손페이지가 우리가 컨트롤할 수 없는 외부 페이지인 경우는 웹표준에 어긋나도 scrolling속성을 사용
1) 부모가 되는 페이지의 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>아이프레임태그</title>
<style>
iframe{ border: none; } /* frameborder속성 대체 */
</style>
</head>
<body>
<h1>부모페이지 - 아이프레임을 담고 있는 페이지</h1>
<iframe src="child.html" width="500" height="400"></iframe>
</body>
</html>
2) child.html코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>아이프레임태그</title>
<style>
html{ overflow: hidden; } /* 부모페이지의 아이프레임에 생기는 스크롤바를 없애기 위한 코드 */
ul{
height: 500px;
background-color: pink;
}
</style>
</head>
<body>
<h1>아이프레임에 속할 페이지</h1>
<ul>
<li><a href="https://www.starbucks.co.kr/index.do" target="_parent">스타벅스</a></li>
<li><a href="https://www.coffeebeankorea.com/main/main.asp" target="_parent">커피빈</a></li>
<li><a href="https://www.tomntoms.com/" target="_parent">탐앤탐스</a></li>
</ul>
</body>
</html>- 자손 페이지의 링크(a)에 target값에 [_parent]를 작성하면 부모페이지에서 페이지 이동
3) 자손페이지의 링크가 부모페이지에서 바뀌는 것을 확인
- 자손페이지의 링크를 클릭했을 때 부모페이지에서 변경되는 것을 확인할 수 있다.
'웹언어 > HTML5' 카테고리의 다른 글
| [HTML기초문법] 10강 기본 input태그의 속성 (0) | 2020.05.19 |
|---|---|
| [HTML기초문법] 9강 form관련 태그input, select, textarea, label 등 (0) | 2020.05.19 |
| [HTML기초문법] 7강 멀티미디어 태그 - audio, video태그 (0) | 2020.05.18 |
| [HTML기초문법] 6강 테이블(table)태그 (0) | 2020.05.15 |
| [HTML기본문법] 5강 <div>태그와 <span>태그 (0) | 2020.04.23 |
