jquery ui popup a YouTube Video modally

2019-02-20 05:38发布

站内问答 / 前沿技术
1222 3 4

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>

3条回答
疯言疯语
2楼-- · 2019-02-20 05:44

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
});
查看更多
0人赞 添加讨论(0) 举报
Viruses.
3楼-- · 2019-02-20 05:53

You could always use fancybox or something similar.

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
4楼-- · 2019-02-20 06:05

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)