TIL 46 | ★다방 랜딩페이지15(유튭 영상 배경으로 넣기)
패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. YOUTUBE 영상을 배경으로 넣는 방법을 배웠다
코드를 작성하면서 생긴 궁금증
HTML에서 왜 "youtube__area"
와 형제 요소로"youtube__cover
"를 두는지와
Youtube IFrame API 문서의 3번을 실행할 때, 변수 선언부분 var player;는 왜 스킵하고
new YT.player을 변수에 할당하는 부분은 왜 스킵했는지...
CSS를 작성할 때, margin-top: calc(1920px * 9 / 16 / -2); 이건 무슨 원리로 이렇게 계산이 되며 어떻게 이렇게 부모요소인 youtube를 지나서 배치가 되는지....
HTML
- Youtube IFrame API(developers.google.com)에서 제공하는 형식을 따르기 위해
<div id="player"></div>
를 삽입
- 영상을 삽입할 공간(
"youtub__cover"
)을 만들 때, "youtube__area"
와 형제 요소로 "youtube__cover"
를 만들어서 "youtube__cover"
가 "youtube__area"
위에 덮어 쓰는 방식을 사용
<script defer src="./js/youtube.js"></script>
> youtube.js 파일을 html파일과 연결시키기 위해 head tag에 삽입
<!-- YOUTUBE VIDEO -->
<section class="youtube">
<div class="youtube__area">
<div id="player"></div>
</div>
<div class="youtube__cover"></div>
</section>
JS_youtube.js
- Youtube IFrame API(developers.google.com)에서 제공한 명령 사용
- Youtube IFrame API : youtube 영상을 어떻게 하면 내 사이트에 삽입할 수 있는지에 대한 참조문서
- 해석
- var tag = document.createElement('script'); > tag라는 변수에 'script'태그를 생성해서 할당한다(createElement라는 메소드를 통해 요소생성)
- tag.src = "https://www.youtube.com/iframe_api"; > 그렇게 생성한 tag에 src라는 속성에다가 실제 youtube에 영상을 재생할 수 있는 명령의 자바스크립트 파일을 가져온다(할당)
- var firstScriptTag = document.getElementsByTagName('script')[0]; > script라는 tag네임을 가지고 있는 요소들 중에 0번째(첫번째) 요소를 firstScriptTag에 할당해준다
- firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); > 그렇게 찾은 firstScriptTag 중의 parentNode(부모요소)를 찾아서 insertBefore(무엇인가의 이전 부분에 삽입해줄 것) > 삽입되는 요소는 우리가 찾은 tag라는 변수, firstScriptTag이전
- 적용 : 1~4번까지 새로 만든 youtube.js 파일에 붙여주고, Youtube IFrame API 문서의 3번에 해당하는 api들도 붙여주고 내가 제어를 원하는 대로 함수의 옵션들을 만져준다
- new YT.Player('player', { > html
<div id="player">
id값
- videoId: 'An6LvWQuj_8', > 최초 재생할 유튜브 영상 ID
- autoplay: true, > 자동 재생 유무
- loop: true, > 반복 재생 유무
- playlist: 'An6LvWQuj_8' > 반복 재생할 유튜브 영상 ID 목록
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
new YT.Player('player', {
videoId: 'An6LvWQuj_8',
playerVars: {
autoplay: true,
loop: true,
playlist: 'An6LvWQuj_8'
},
events: {
onReady: function (event) {
event.target.mute() // 영상이 준비가 되면 영상을 음소거 처리
}
}
});
}
CSS
- Youtube와 Video등 영상을 삽입할 때 이용할 수 있는 원리(16:9의 원리)
- container width 값을 주고 height값을 주지 않고 item에 width:100% height: 0, padding-top을 50% 주면 item height은 container width의 50%가 된다
- youtube나 vimeo 영상들은 보통 가로 : 세로의 비율이 16:9로 제공이 된다
- container item의 padding-top:56.25%로 주면 item 요소의 가로:세로의 비율이 16:9가 된다
- 이 원리를 사용해서 CSS를 작성하고 youtube 영상을 삽입하였따
- 참고로 Full HD 가로 1920px, 세로 1080px
- .youtube__area 안에 요소를 만들어서 스타일을 만들고 싶은데
HTML에서 자식요소를 만들지 않고 CSS 안에서 스타일로 해결(가상요소선택자 before를 사용함)
/* YOUTUBE VIDEO */
.youtube {
position: relative;
height: 700px;
background-color: #333;
/* youtube 영역에서 넘치는 부분 전부 잘라내기 */
overflow: hidden;
}
.youtube .youtube__area {
width: 1920px;
position: absolute;
left: 50%;
margin-left: calc(1920px/-2);
/* top부분에 50%부분에 위치하겠음 */
top: 50%;
margin-top: calc(1920px * 9 / 16 / -2);
}
.youtube .youtube__area::before {
content: "";
/* 가상요소선택자는 인라인요소이기 때문에 display: block; 선언 */
display: block;
width : 100%;
height: 0;
padding-top:56.25%;
}
.youtube .youtube__cover {
background-image: url("../images/video_cover_pattern.png");
background-color: rgba(0,0,0,.3);
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
#player {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
Author And Source
이 문제에 관하여(TIL 46 | ★다방 랜딩페이지15(유튭 영상 배경으로 넣기)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@yeonbee/TIL-46-다방-랜딩페이지15유튭-영상-배경으로-넣기
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<div id="player"></div>
를 삽입"youtub__cover"
)을 만들 때, "youtube__area"
와 형제 요소로 "youtube__cover"
를 만들어서 "youtube__cover"
가 "youtube__area"
위에 덮어 쓰는 방식을 사용<script defer src="./js/youtube.js"></script>
> youtube.js 파일을 html파일과 연결시키기 위해 head tag에 삽입<!-- YOUTUBE VIDEO -->
<section class="youtube">
<div class="youtube__area">
<div id="player"></div>
</div>
<div class="youtube__cover"></div>
</section>
- Youtube IFrame API(developers.google.com)에서 제공한 명령 사용
- Youtube IFrame API : youtube 영상을 어떻게 하면 내 사이트에 삽입할 수 있는지에 대한 참조문서
- 해석
- var tag = document.createElement('script'); > tag라는 변수에 'script'태그를 생성해서 할당한다(createElement라는 메소드를 통해 요소생성)
- tag.src = "https://www.youtube.com/iframe_api"; > 그렇게 생성한 tag에 src라는 속성에다가 실제 youtube에 영상을 재생할 수 있는 명령의 자바스크립트 파일을 가져온다(할당)
- var firstScriptTag = document.getElementsByTagName('script')[0]; > script라는 tag네임을 가지고 있는 요소들 중에 0번째(첫번째) 요소를 firstScriptTag에 할당해준다
- firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); > 그렇게 찾은 firstScriptTag 중의 parentNode(부모요소)를 찾아서 insertBefore(무엇인가의 이전 부분에 삽입해줄 것) > 삽입되는 요소는 우리가 찾은 tag라는 변수, firstScriptTag이전
- 적용 : 1~4번까지 새로 만든 youtube.js 파일에 붙여주고, Youtube IFrame API 문서의 3번에 해당하는 api들도 붙여주고 내가 제어를 원하는 대로 함수의 옵션들을 만져준다
- new YT.Player('player', { > html
<div id="player">
id값 - videoId: 'An6LvWQuj_8', > 최초 재생할 유튜브 영상 ID
- autoplay: true, > 자동 재생 유무
- loop: true, > 반복 재생 유무
- playlist: 'An6LvWQuj_8' > 반복 재생할 유튜브 영상 ID 목록
- new YT.Player('player', { > html
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
new YT.Player('player', {
videoId: 'An6LvWQuj_8',
playerVars: {
autoplay: true,
loop: true,
playlist: 'An6LvWQuj_8'
},
events: {
onReady: function (event) {
event.target.mute() // 영상이 준비가 되면 영상을 음소거 처리
}
}
});
}
CSS
- Youtube와 Video등 영상을 삽입할 때 이용할 수 있는 원리(16:9의 원리)
- container width 값을 주고 height값을 주지 않고 item에 width:100% height: 0, padding-top을 50% 주면 item height은 container width의 50%가 된다
- youtube나 vimeo 영상들은 보통 가로 : 세로의 비율이 16:9로 제공이 된다
- container item의 padding-top:56.25%로 주면 item 요소의 가로:세로의 비율이 16:9가 된다
- 이 원리를 사용해서 CSS를 작성하고 youtube 영상을 삽입하였따
- 참고로 Full HD 가로 1920px, 세로 1080px
- .youtube__area 안에 요소를 만들어서 스타일을 만들고 싶은데
HTML에서 자식요소를 만들지 않고 CSS 안에서 스타일로 해결(가상요소선택자 before를 사용함)
/* YOUTUBE VIDEO */
.youtube {
position: relative;
height: 700px;
background-color: #333;
/* youtube 영역에서 넘치는 부분 전부 잘라내기 */
overflow: hidden;
}
.youtube .youtube__area {
width: 1920px;
position: absolute;
left: 50%;
margin-left: calc(1920px/-2);
/* top부분에 50%부분에 위치하겠음 */
top: 50%;
margin-top: calc(1920px * 9 / 16 / -2);
}
.youtube .youtube__area::before {
content: "";
/* 가상요소선택자는 인라인요소이기 때문에 display: block; 선언 */
display: block;
width : 100%;
height: 0;
padding-top:56.25%;
}
.youtube .youtube__cover {
background-image: url("../images/video_cover_pattern.png");
background-color: rgba(0,0,0,.3);
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
#player {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
Author And Source
이 문제에 관하여(TIL 46 | ★다방 랜딩페이지15(유튭 영상 배경으로 넣기)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@yeonbee/TIL-46-다방-랜딩페이지15유튭-영상-배경으로-넣기
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- container width 값을 주고 height값을 주지 않고 item에 width:100% height: 0, padding-top을 50% 주면 item height은 container width의 50%가 된다
- youtube나 vimeo 영상들은 보통 가로 : 세로의 비율이 16:9로 제공이 된다
- container item의 padding-top:56.25%로 주면 item 요소의 가로:세로의 비율이 16:9가 된다
HTML에서 자식요소를 만들지 않고 CSS 안에서 스타일로 해결(가상요소선택자 before를 사용함)
/* YOUTUBE VIDEO */
.youtube {
position: relative;
height: 700px;
background-color: #333;
/* youtube 영역에서 넘치는 부분 전부 잘라내기 */
overflow: hidden;
}
.youtube .youtube__area {
width: 1920px;
position: absolute;
left: 50%;
margin-left: calc(1920px/-2);
/* top부분에 50%부분에 위치하겠음 */
top: 50%;
margin-top: calc(1920px * 9 / 16 / -2);
}
.youtube .youtube__area::before {
content: "";
/* 가상요소선택자는 인라인요소이기 때문에 display: block; 선언 */
display: block;
width : 100%;
height: 0;
padding-top:56.25%;
}
.youtube .youtube__cover {
background-image: url("../images/video_cover_pattern.png");
background-color: rgba(0,0,0,.3);
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
#player {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
Author And Source
이 문제에 관하여(TIL 46 | ★다방 랜딩페이지15(유튭 영상 배경으로 넣기)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yeonbee/TIL-46-다방-랜딩페이지15유튭-영상-배경으로-넣기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)