Question

我一直在使用jquery ui的对话框弹出框将youtube视频放入其中....

它工作得很好，但我想要的是当用户点击播放管视频...如果然后他们点击x关闭开箱即用.......视频停止播放但是当我再次打开盒子，盒子是空的

所以我的问题是如何做到这一点，当用户关闭时，视频停止播放，他们可以重新打开该框以再次看到视频

继承人html

  <h2 class="demoHeaders">Dialog</h2>
  <p><a href="#" id="dialog-link" class="ui-state-default ui-corner-all"><span class="ui-          icon ui-icon-newwin"></span>Open Dialog</a></p>

   <!-- ui-dialog -->
   <div id="dialog" title="Dialog Title">
<iframe width="560" height="315" src="http://www.youtube.com/embed/7Lmxmh9zDEk"   frameborder="0" allowfullscreen></iframe>
   </div>

继承人jquery

$(function() {


    $( "#dialog" ).dialog({
        autoOpen: false,
        width: 400,
        buttons: [
            {
                text: "Ok",
                click: function() {
                    $( this ).dialog( "close" );
                }
            },
            {
                text: "Cancel",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });

    // Link to open the dialog
    $( "#dialog-link" ).click(function( event ) {
        $( "#dialog" ).dialog( "open" );
        event.preventDefault();
    });

            $(".ui-icon-closethick").click (event) ->
        event.preventDefault()
       $("#video").remove()

下面是小提琴的链接http://jsfiddle.net/QBKzH/1/

感谢你的帮助！

Answer 1

我有同样的问题。我从我的嵌入中抓取了网址，并在事件点击时将其附加，并在模态关闭时将其分离。你可以在你认为的iframe中做同样的事情。

为您的iframe提供ID

<iframe id="video" />或其他什么

$('#dialog-link').on("click", function(e) {
    e.preventDefault();

            // Set video url
    var videoSourceLink = 'http://www.youtube.com/embed/7Lmxmh9zDEk';

            // Attach video link
    $('#video').attr('src', videoSourceLink);

    $('#dialog').dialog({
        modal: true,
        width:658,
        height:404,
        resizable: false,
        open: function(){
            $('.ui-widget-overlay').bind('click',function(){
                $('#video').removeAttr('src');  
                $('<don't remember what this select is').dialog('close');                
            });
        }                   
    });
});

窗口关闭后，带有youtube视频的jquery ui对话框消失

1 个答案: