jquery ui popup a YouTube Video modally
Is there a way to use jQueryUI to popup a YouTube video modally?
开发者_开发知识库Here's the YouTube code I have:
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/DIuXtsaUDmM?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/DIuXtsaUDmM?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
You can try modifying this code below to fit your scenario .. i've used your video link though. You'll have to download the jquery files as well.
<html>
<head>
<title> Youtube Popup</title>
<link type="text/css" href="jquery-ui-1.8.7.custom.css" rel="stylesheet" />
<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script language="javascript" src="jquery-ui-1.8.7.custom.min.js"></script>
<script>
function Show() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-modal" ).dialog({
height: 470,
width: 550,
modal: true
});
}
</script>
</head>
<body>
<div id="dialog-modal" Title="Youtube Video" style="display:none">
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/DIuXtsaUDmM?
fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess"
value="always"></param><embed src="http://www.youtube.com/v/DIuXtsaUDmM?fs=1&hl=en_US" type="application/x-
shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
</div>
<input type="button" onclick="javascript:Show()" value="click me" />
</body>
</html>
Hope this helps
You could always use fancybox or something similar.
You can use the swfobject script to embed the flash object into the modal popup.
Use the dialog's open event to attach a handler which embeds the flash movie:
$( ".selector" ).bind( "dialogopen", function(event, ui) {
// use swfobject to include flash movie to
// container within diaglog
});
加载中,请稍侯......
精彩评论