youtube iframe Api 사용하기

사용 docs

youtube iframe api

api 사용법

우선 영상을 재생할 위치에 id 가 player 인 div 요소를 생성한다.

<div id="player"></div>

youtube.js 파일을 새롭게 만들고

그 안에

// Youtube IFrame API를 비동기로 로드합니다.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
//기존의 script 태그들 중에 가장 앞에 tag를 생성한다.
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// onYouTubePlayerAPIReady 함수 이름은,
// Youtube IFrame Player API에서 사용하는 이름이기 때문에,
// 다르게 지정하면 동작하지 않습니다!
// 그리고 함수는 전역(Global) 등록해야 합니다!
function onYouTubePlayerAPIReady() {
  // <div id="player"></div>
  new YT.Player('player', {
    videoId: 'An6LvWQuj_8', // 최초 재생할 유튜브 영상 ID
    playerVars: {
      autoplay: true, // 자동 재생 유무
      loop: true, // 반복 재생 유무
      playlist: 'An6LvWQuj_8' // 반복 재생할 유튜브 영상 ID 목록
    },
    events: {
      // 영상이 준비되었을 때,
      onReady: function (event) {
        event.target.mute() // 음소거!
      }
    }
  })
}

코드를 입력해준다.

플레이어 매개변수

여러가지 사용가능한 변수들을 확인할 수 있다.

유튜브 영상 id는 재생하고자 하는 유튜브 주소의 뒤부분 v= 이후 부분이다.

둥실둥실 애니메이션 만들기

gsap 사용!

gsap.to(요소, 시간, 옵션);

애니메이션 동작 함수 만들기

function floatingObject(selector, delay, size) {
  gsap.to(
    selector, // 선택자
    random(1.5, 2.5), // 애니메이션 동작 시간
    {
      delay: random(0, delay), // 얼마나 늦게 애니메이션을 시작할 것인지 지연 시간을 설정.
      y: size, // `transform: translateY(수치);`와 같음. 수직으로 얼마나 움직일지 설정.
      repeat: -1, // 몇 번 반복하는지를 설정, `-1`은 무한 반복.
      yoyo: true, // 한번 재생된 애니메이션을 다시 뒤로 재생.
      ease: Power1.easeInOut // Easing 함수 적용.
    }
  )
}

여러개의 요소가 각각 움직이는걸로 보이도록 랜덤함수로 움직이는 거리, 시간, 딜레이값 넣어주기

랜덤 수가 소수점 두자리까지 나오는 랜덤 함수 만들기

// 범위 랜덤 함수(소수점 2자리까지)
function random(min, max) {
  // `.toFixed()`를 통해 반환된 '문자 데이터'를,
  // `parseFloat()`을 통해 소수점을 가지는 '숫자 데이터'로 변환
  return parseFloat((Math.random() * (max - min) + min).toFixed(2))

인자들 넣어서 함수 실행!

floatingObject('.floating1', 1, 15)
floatingObject('.floating2', .5, 15)
floatingObject('.floating3', 1.5, 20)

배경화면 고정하고 스크롤 하기