Question

可以将多个按钮附加到同一页面，而该页面又拥有自己的youtube ID。可以单击该按钮，这将打开模式（弹出窗口）内的YouTube视频。我有一个单一的实例工作，如何让javascript代码处理多个按钮？

HTML（php）如下所示：

＆＃13;

<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>

＆＃13;

然后我有javascript代码触发模态并控制视频：

＆＃13;

$(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();
  });

});

＆＃13;

需要的是将此代码包含在可重用的函数中，任何帮助都会很棒。

Answer 1

听起来令人困惑。你打算打开并控制多个弹出窗口？他们会集中注意力！

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

我在我制作的小“youtube游乐场”中有这个其中一个是THIS个。选择User uploads并输入用户播放列表即可查看。

我打开一个由iframe填充的弹出窗口这反过来又发送了基本信息，以便它知道要加载什么。

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

1 个答案: