如何弹出一个 jquery 窗口来播放 youtube 视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2838749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to popup a jquery window to play youtube video?
提问by WinFXGuy
I need this video to play automatically. It would be nice, this code can play videos from other sources like yahoo etc.. Is it also possible to use HTML5, instead of jquery?
我需要这个视频自动播放。太好了，这段代码可以播放来自雅虎等其他来源的视频。是否也可以使用 HTML5 而不是 jquery？
回答by DavGarcia
The function or plugin you use to display the popup window will probably be different from what you are using to display the video. In this example I used the Overlay Plugin from jQuery Toolsto display the modal then used swfobjectto display the YouTube Flash Player. Alternatively, you could use an HTML5 video player with Flash fallbackto display the video, but you would still need it to popup your modal first.
您用来显示弹出窗口的功能或插件可能与您用来显示视频的不同。在这个例子中，我使用了jQuery Tools的Overlay Plugin来显示模式，然后使用swfobject来显示 YouTube Flash Player。或者，您可以使用带有 Flash 回退功能的HTML5 视频播放器来显示视频，但您仍然需要先使用它来弹出您的模式。
<a href="http://www.youtube.com/v/2cxqZiWyW3g&hl=en_US&fs=1&autoplay=1"
class="video-link">Video 1</a>
<a href="http://www.youtube.com/v/607RMNoJfl4&hl=en_US&fs=1&autoplay=1"
class="video-link">Video 2</a>
<div class="modal" id="video-modal">
<div id="video-container" style="width: 425px; height: 344px;"></div>
</div>
<script language="javascript" type="text/javascript">
$(function() {
var videoModal = $('#video-modal').overlay({
expose: {
color: 'black',
loadSpeed: 200,
opacity: 0.85
},
closeOnClick: true,
api: true
});
$('.video-link').click(function() {
videoModal.load();
var videoUrl = $(this).attr('href');
var flashvars = {};
var params = {
allowFullScreen: "true",
allowscriptaccess: "always"
};
var attributes = {};
swfobject.embedSWF(videoUrl, 'video-container', '425', '344', '9.0.0', '', flashvars, params, attributes);
return false;
});
});
</script>
回答by David Robbins
SimpleModalis a great jQuery plugin as it offers many different options, one being displaying external content:
SimpleModal是一个很棒的 jQuery 插件，因为它提供了许多不同的选项，其中一个是显示外部内容：
// Display an external page using an iframe
var src = "http://365.ericmmartin.com/";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
closeHTML:"",
containerCss:{
backgroundColor:"#fff",
borderColor:"#fff",
height:450,
padding:0,
width:830
},
overlayClose:true
});
Bill Beckelmanhas great series of tutorials on integrating SimpleModal with Asp.Net as custom confirmation dialog box. He demonstrates how to create great client side functionality as well as how to post back to the server. it really helped get my head wrapped around how to best integrate jQuery with ASP.Net.
Bill Beckelman有很多关于将 SimpleModal 与 Asp.Net 集成为自定义确认对话框的教程。他演示了如何创建出色的客户端功能以及如何回发到服务器。它确实帮助我思考了如何最好地将 jQuery 与 ASP.Net 集成。
回答by adib
PrettyPhotois a pure JavaScript library that displays images and videos in a lightbox.
PrettyPhoto是一个纯 JavaScript 库，可以在灯箱中显示图像和视频。
For your purposes, you need you tag the YouTube link with a special "rel" attribute, the video will then open in a popup lightbox.
出于您的目的，您需要使用特殊的“rel”属性标记 YouTube 链接，然后视频将在弹出灯箱中打开。
