메가박스 사이트 따라 만들기 - Youtube API - 끝

megabox22

탭메뉴, 스킵메뉴

https://developers.google.com/youtube/player_parameters
youtube API 매개변수 설정 사이트

 

결과

HTML

<div class="play" id="showTrailer" data-youtube="F1239ZePXfM"></div>

 

style.css

/* 트레일러 */
.overlay {
  background: rgba(0, 0, 0, .92);
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

.modal {
  position: absolute;
}

.modal_close {
  background: url(../img/close.svg) no-repeat;
  background-size: 32px 32px;
  border: 0;
  color: transparent;
  display: block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  position: absolute;
  top: 24px;
  right: 24px;
  text-indent: 100%;
}

body.modal_on {
  overflow: hidden;
}

 

js

/* movie.js */
(function ($) {
  /* 트레일러 영상 플레이어를 활성화 */
  /* YouTube iframe API: https://developers.google.com/youtube/player_parameters */

  (function handleTrailer() {
    //셀렉터 캐시
    var $selector = {
      body: $("body"),
      overlay: $("#blackout"),
      modal: $("#trailermodal"),
      showButton: $("#showTrailer"),
      hideButton: $("#hideTrailer"),
    };

    // 플레이어
    var player = {
      obj: null, // 플레이어 오브젝트
      query: {
        theme: "dark",
        color: "white",
        controls: 1,
        autoplay: 1,
        enablejsapi: 1,
        modestbranding: 0, // YouTube 로고 감춤
        rel: 0, // 관련 동영상 표시
        showinfo: 0, // 제목, 업로더 감춤
        iv_load_policy: 3, // 특수효과 감춤
      },
      visible: false,
    };
    //보이기, 숨기기 버튼 활성화
    $selector.showButton.on("click", showPlayer);
    $selector.hideButton.on("click", hidePlayer);

    //YouTube API를 이용해 iframe을 생성
    function setPlayer(id) {
      player.obj = new YT.Player("trailer", {
        width: 480,
        height: 282,
        videoId: id,
        playerVars: player.query,
      });

      //처음 플레이어 크기 설정
      resizePlayer();

      //리사이즈 화면 회전시 플레이어 크기 다시 설정
      $(window).on("resize orientationchange", function () {
        resizePlayer();
      });
    }

    function resizePlayer() {
      var viewport = {},
        frame = {},
        modal = {};

      viewport.width = $(window).width();
      viewport.height = $(window).height();

      frame.width = viewport.width;
      frame.height = frame.width / 1.6; //16:10

      modal.top = (viewport.height - frame.height) / 2 + "px";
      modal.left = "0px";

      $selector.modal.css(modal);

      player.obj.setSize(frame.width, frame.height);
    }

    //iframe 보이기
    function showPlayer() {
      if (!player.obj) {
        setPlayer($selector.showButton.data("youtube"));
      }
      $selector.body.addClass("modal_on");
      $selector.overlay.show();
      player.visible = true;
    }
    //iframe 감추기
    function hidePlayer() {
      player.obj.stopVideo();
      $selector.overlay.hide();
      $selector.body.removeClass("modal_on");
      player.visible = false;
    }
  })();
})(jQuery);

/* iframe_api.js */
if (!window["YT"]) {
  var YT = {
    loading: 0,
    loaded: 0
  };
}
if (!window["YTConfig"]) {
  var YTConfig = {
    host: "https://www.youtube.com"
  };
}
if (!YT.loading) {
  YT.loading = 1;
  (function () {
    var l = [];
    YT.ready = function (f) {
      if (YT.loaded) {
        f();
      } else {
        l.push(f);
      }
    };
    window.onYTReady = function () {
      YT.loaded = 1;
      for (var i = 0; i < l.length; i++) {
        try {
          l[i]();
        } catch (e) {}
      }
    };
    YT.setConfig = function (c) {
      for (var k in c) {
        if (c.hasOwnProperty(k)) {
          YTConfig[k] = c[k];
        }
      }
    };
    var a = document.createElement("script");
    a.type = "text/javascript";
    a.id = "www-widgetapi-script";
    a.src =
      "https://s.ytimg.com/yts/jsbin/www-widgetapi-vflTZdOF2/www-widgetapi.js";
    a.async = true;
    var c = document.currentScript;
    if (c) {
      var n = c.nonce || c.getAttribute("nonce");
      if (n) {
        a.setAttribute("nonce", n);
      }
    }
    var b = document.getElementsByTagName("script")[0];
    b.parentNode.insertBefore(a, b);
  })();
}

 

출력

플레이 버튼을 클릭하면 동영상 재생