javascript - 使用iframe嵌入API在同一页面上的多个YouTube播放器

Question

多个按钮将可以附加到同一页面，而这些按钮又具有自己的youtube ID。可以单击该按钮，这将在模式(弹出窗口)内打开youtube视频。我为单实例执行此操作，如何使javascript代码处理多个按钮？

HTML(php)如下所示:

<button id="play-icon-<?php echo $bID; ?>" class="button" target="_blank">Watch our show reel</button>

<div class="remodal video-modal" data-remodal-id="video-modal-<?php echo $bID; ?>">
  <button data-remodal-action="close" class="modal-close"><span class="icon-close"></span></button>
  <div class="video-wrapper">
    <div id="player-container" class="screen"></div>
  </div>
  <span class="loader"></span>
</div>

然后，我将触发模式并控制视频的javascript代码:

$(function() {
  openModal('<?php echo $youtube_ID; ?>');
});


function openModal(video_id) {
  var playButton = $('#play-icon-<?php echo $bID; ?>');
  var modal = $('[data-remodal-id=video-modal-<?php echo $bID; ?>]');
  var settings = {
    hashTracking: false
  }
  var inst = modal.remodal(settings);
  var device = $.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

  playButton.on('click', function(e) {

    if (device) {

      var yturl = '//www.youtube.com/embed/' + video_id + '?rel=0&showinfo=0&modestbranding=1&autoplay=1&controls=0';
      $('body').append('<span id="close-video-modal" class="icon-close"></span><iframe id="large-modal-banner-video" src="' + yturl + '"></iframe>');

    } else {

      inst.open();
      play_video(video_id);

    }

  });
}

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var modelPlayer;
var modelPlayerDefaults = {
  autoplay: 0,
  autohide: 1,
  modestbranding: 0,
  rel: 0,
  showinfo: 0,
  controls: 0,
  disablekb: 1,
  enablejsapi: 0,
  iv_load_policy: 3
};

function play_video(id) {
  modelPlayer = new YT.Player('player-container', {
    videoId: id.toString(),
    events: {
      'onReady': onModalPlayerReady,
      'onStateChange': onModelPlayerStateChange
    },
    playerVars: modelPlayerDefaults
  });
}

function onModelPlayerStateChange(e) {
  if (e.data === 1) {
    $('.loader').fadeOut();
    $('#player-container').addClass('active');
  } else if (e.data === 0) {
    var currentModal = $('#player-container.active').closest('.video-modal');
    var inst = currentModal.remodal();
    inst.close();
    $('#player-container').removeClass('active');
  } else {
    $('#player-container').removeClass('active');
    $('.loader').show();
  }
}

function onModalPlayerReady(e) {
  modelPlayer.playVideo();
}

$(document).on('closed', '.video-modal', function() {
  modelPlayer.destroy();
});

$(document).on('click tap', '#close-video-modal', function(e) {
  e.preventDefault();

  $('#close-video-modal, #large-modal-banner-video').fadeOut(function() {
    $(this).remove();
  });

});

所需的是将此代码包含在可重用的函数中，任何帮助都将非常有用。

Answer 1

听起来很困惑。您要打开并控制多个弹出窗口吗？他们会失去焦点!

如果您只想通过按钮/链接将视频加载到弹出窗口中，则可以。

我把它放在我的小“youtube游乐场”中。
其中之一是THIS一。选择User uploads并放入用户播放列表中进行查看。

我打开一个由iframe填充的弹出窗口。
依次将基本信息发送给它，以便它知道要加载什么。