비메오 및 YTPlayer

#YTPLAYER

 <div class="content utb">
	<div id="utb"></div>
 </div>
  <script src="https://player.vimeo.com/api/player.js"></script>
 <script>
     jQuery("#utb").YTPlayer({
        videoURL: "https://youtu.be/eKP4g57JHzU",
        containment: ".utb", //재생위치
        autoPlay: false,
        showControls: true,
        mute: true,
        startAt: 0,
        opacity: 1,
        playOnlyIfsible: true,
      });

      $(".utb .zoom").click(function () {
        $("#utb").YTPFullscreen();
        return false;
      });
</script>

#비메오

 <section class="video">
  <div class="video_wrap">
    <iframe
      src="https://player.vimeo.com/video/76979871?autoplay=1&loop=1&title=0&background=1&muted=true&portrait=false&controls=false"
      width="100%"
      height="360"
      frameborder="0"
      allowfullscreen
      class="vimeo_iframe"
    >
  </div>
  </iframe>
</section>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
/*비메오 버튼 컨트롤*/
  vimeo_play_and_stop();

  function vimeo_play_and_stop() {
    var f = $(".vimeo_iframe");
    $(f).each(function (idx) {
      if (!f || !f.attr("src")) return;

      var url = f.eq(idx).attr("src").split("?")[0];
      //console.log(url);
      $(".play").click(function () {
        var data = {
          method: "play",
          value: 1,
        };
        f[0].contentWindow.postMessage(JSON.stringify(data), url);
      });

      $(".stop").click(function () {
        var data = {
          method: "pause",
          value: 1,
        };

        f[0].contentWindow.postMessage(JSON.stringify(data), url);
      });
    });
  }
</script>

 

+YTPLAYER 참조

https://github.com/pupunzi/jquery.mb.YTPlayer

GitHub - pupunzi/jquery.mb.YTPlayer: use a custom yutube player for a video as background on jQuery framework

 

+비메오참조

https://github.com/vimeo/player.js

GitHub - vimeo/player.js: Interact with and control an embedded Vimeo Player.