YouTube Grid Gallery:如何让播放器出现在弹出窗口中?
我正在使用以下代码:
<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 选项,使用可见和显示,但我似乎无法得到正确的结果。任何给新手的建议将不胜感激,谢谢!
I'm using the following code:
<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>
which is found here:http://groups.google.com/group/youtube-api-gdata/browse_thread/thread/f3994f8078d20fe6.
What is the easiest way to have the player appear in a popup? I've been playing around with CSS options, using visible and display, but I can't seem to get it correct. Any tips for a newbie would be greatly appreciated, thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果您希望播放器显示在内容之上,您可以在 CSS 中使用
position:absolute;
,将其从文档内容流中取出。然后使用top
和left
规则将其放置在您喜欢的位置。由于您已经知道弹出窗口的尺寸,因此您可以使用 javascript 将其居中以计算顶部和左侧位置。祝你好运,
根据 Flitig
网光咨询
If you want the player to be displayed on top of your content you could use
position: absolute;
in your CSS which takes it out of the document content flow. Then you use thetop
andleft
rules to place it where you like. Since you already know the dimensions of your popup, you can center it using javascript to calculate the top and left positions.Good luck,
Per Flitig
Netlight Consulting