![CSS - [ YouTube iframe API ]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb7GnLF%2FbtrA8UkEcOn%2FB8Zzs1tYBm7RKJV6Qchvck%2Fimg.png)
브라우저에 유튜브 영상 출력해보기!
https://developers.google.com/youtube/iframe_api_reference?hl=ko API 문서 참조
우선 영상이 출력될 요소를 구성해보자. 영상은 일반적으로 16:9의 비율이므로 그에 맞춰보겠다.
먼저 Html에 item과, item을 감싸고 있는 container 요소를 만든다.
그리고 css에서 container 요소에 width 값을 주고, item 요소에 % 단위의 width와 patting-top를 주면 그에 맞는 비율의 요소 크기가 그려진다.
즉 아래에서 width : padding-top 이 100:56.25 이므로 16:9의 비율로 만들어졌다고 보면 된다!
youtube ifram을 만들 때는 아래와 같이 html에 요소를 만들지 않고 가상 선택자를 이용해 컨텐츠를 추가했다.
즉 youtube__area 가 container, youtube__area::before 가 item의 역할을 하고있다고 보면 된다!
<!DOCTYPE html>
<html>
<body>
<!-- 1. 유튜브가 출력되는 부분 -->
<div id="player"></div>
<script>
// 2. 외부 js 불러오기
var tag = document.createElement('script'); // var 대신 let 또는 const로 사용해도 ok
tag.src = "https://www.youtube.com/iframe_api"; // src 속성에 영상을 재생할 수 있는 외부 js파일을 할당
var firstScriptTag = document.getElementsByTagName('script')[0]; // 첫 번째 script 태그를 변수에 할당
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 해당 태그의 부모 요소의 이전 부분에 윗 줄의 script 태그 추가
// -> 즉 script 태그들의 제일 윗부분에 추가!
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() { // 연결한 외부 js에서 이 함수 찾음. 즉 함수 이름 변경하면 안 됨!
player = new YT.Player('player', { // html에 id를 player로 설정한 요소 찾음
height: '360', // 영상 세로 너비
width: '640', // 영상 가로 너비
videoId: 'M7lc1UVf-VE', // 최초 재생할 유튜브 영상 ID
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
영상의 VideoId는 원하는 영상 주소에서 v= 다음에 있는 값을 가져오면 된다.
youtube.js 파일을 만들어 아래와 같이 코드를 작성하고 확인해보면
// 2. 외부 js 불러오기
var tag = document.createElement('script');
// script 태그들의 제일 윗 부분에 'tag' 추가
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
function onYouTubeIframeAPIReady() { // 연결한 외부 js에서 이 함수 찾음. 즉 함수 이름 변경하면 안 됨!
new YT.Player('player', { // html에서 id가 player인 요소 찾음
videoId: 'An6LvWQuj_8', // 최초 재생할 유튜브 영상 ID
playerVars: {
// 영상을 재생하기 위한 변수들
autoplay: true, // 자동 재생 유무
loop: true, // 반복 재생 유무. true로 값 주면 playlist 값도 줘야함!
playlist: 'An6LvWQuj_8' // 반복 재생할 유튜브 영상 ID 목록
},
events: {
onReady: onPlayerReady // 재생이 준비되면 onPlyaerReady 함수 실행
}
});
}
function onPlayerReady(event) {
event.target.playVideo(); // 비디오 플레이
event.target.mute(); // 음소거
}
영상이 잘 재생됨!
자동 재생이 잘 되지 않아 찾아보니 2018년 4월부터 autoplay옵션은 동작하지 않는다고 한다. 단 영상이 음소거 상태일경우엔 동작한다고 한다. 아래와 같이 작성하니 자동재생이 된다.
참조
'2. Front-end > 2-2. CSS' 카테고리의 다른 글
| CSS - [ 3D 애니메이션 (요소 뒤집기) ] (0) | 2022.05.05 |
|---|---|
| CSS - [ Easing ] (0) | 2022.05.04 |
| CSS - [ position 이용 가운데 정렬 ] (0) | 2022.04.27 |
| CSS - [ Google fonts / Google Material Icons ] (0) | 2022.04.25 |
| CSS - [ 속성(변환 Transform) ] (0) | 2022.04.24 |