YouTube Grid Gallery：如何让播放器出现在弹出窗口中？答案

【问题标题】：YouTube Grid Gallery: How can I get the player to appear in a popup?YouTube Grid Gallery：如何让播放器出现在弹出窗口中？
【发布时间】：2011-11-29 12:42:39
【问题描述】：

我正在使用以下代码：

<head>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
function loadVideo(playerUrl, autoplay) {
  swfobject.embedSWF(
      playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
      (autoplay?1:0), 'player', '290', '250', '9.0.0', false, 
      false, {allowfullscreen: 'true'});
}

function showMyVideos2(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = ['<ul class="videos">'];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t.substr(0, 15);
    var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
    var playerUrl = entries[i].media$group.media$content[0].url;
    html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
              '<span class="titlec">', title, '...</span><br /><img src="', 
              thumbnailUrl, '" width="130" height="97"/>', '</span></li>');
  }
  html.push('</ul><br style="clear: left;"/>');
  document.getElementById('videos2').innerHTML = html.join('');
  if (entries.length > 0) {
    loadVideo(entries[0].media$group.media$content[0].url, false);
  }
}
</script>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
    <object id="player"></object>
</div>
<div id="videos2"></div>
<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/users/yerface/uploads?alt=json-in-script&callback=showMyVideos2&max-results=9">
</script>
</body>
</html>

可在此处找到：http://groups.google.com/group/youtube-api-gdata/browse_thread/thread/f3994f8078d20fe6。

让播放器出现在弹出窗口中的最简单方法是什么？我一直在使用 CSS 选项，使用可见和显示，但我似乎无法正确理解。对于新手的任何提示将不胜感激，谢谢！

【问题讨论】：

标签： javascript css popup youtube gallery

【解决方案1】：

如果您希望播放器显示在您的内容之上，您可以在您的 CSS 中使用 position: absolute; 将其从文档内容流中移除。然后使用top 和left 规则将其放置在您喜欢的位置。由于您已经知道弹出窗口的尺寸，因此您可以使用 javascript 将其居中以计算顶部和左侧的位置。

祝你好运，
每 Flitig
网光咨询

【讨论】：

非常感谢您花时间回答！问题不在于定位播放器。问题是播放器仅在选择视频时出现，并在关闭或视频结束时消失。关于如何做到这一点的任何提示？我找到了显示 youtube 视频的方法是 jquery 弹出窗口，但不是画廊形式。