스타벅스 랜딩 페이지 예제 (Youtube API 사용하여 동영상 배경으로 삽입하기)

DEMO+signin

Youtube API 사용법

YOUTUBE VIDEO 컨트롤러 없이 배경으로 삽입하기

// YOUTUBE VIDEO
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

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() {
  // <div id="palyer"></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() //음소거
      }
    }
  });
}
```