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&amp;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&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

回答1:

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&amp;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&amp;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

回答2:

You could always use fancybox or something similar.

回答3:

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

来源：https://stackoverflow.com/questions/4532210/jquery-ui-popup-a-youtube-video-modally

标签

jquery-ui

youtube

modal-dialog