Modal window with streaming video with facebok

[Jorge Rodes]

Hi guys,

I´m trying to open a modal window with a streaming content with facebox. 

I have a div with an iframe like this one:

<div id="directo" style="display:none;width:627px;height:384px;">

<a href="javascript:void(0);" onclick="javascript:$(document).trigger('close.facebox')">close this facebox modal</a>

    <iframe id="iframe" width="627" height="384"  src="/streaming/streaming.html"></iframe>

</div>

As you can see, it has an iframe with a Streaming video.

That div will be opened when a banner is clicked:

<a href="#banner" rel="facebox"><img src="myImage"/></a>

The problem I´m having is that the streaming video is playing since the page load. What I would like is to start playing it when I open the modal window, and stop playing the streaming

when i close it.

I tried to do it changing whe src of the iframe to #, and changing it on facebox events.

when i close it:  (javascript)

  $(document).bind('close.facebox', function() {

  $('#back').hide();

        $(".iframe").src("#"); //it works correctly

  })

and when i open it:

  $(document).bind('beforeReveal.facebox', function() {

        $(".iframe").src("/streaming/streaming.html"); 

  })

but it always change the src AFTER the modal window charges  (and before opening it), so the src is always #.

Can  anyone help me?

Thanks in advance

[Jorge Rodes]

I finally solved it.

The problem was that i made a hidden div in order to call it from facebox. the src was a Streaming, so it started playing onload.

the solution has been not maing that hidden div and making everything with jquery and dom:

$(".mybanner").click(function(e){

e.preventDefault();

 var link = document.createElement('a');

 link.setAttribute('href', 'javascript:void(0);');

 var cerrar = document.createTextNode("CLOSE");

 link.appendChild(cerrar);

link.addEventListener( 'click', function(){

$(document).trigger('close.facebox');

} );

 i = document.createElement("iframe");

 i.src = "/streaming/streaming.html";

 i.scrolling = "auto";

 i.frameborder = "0";

 i.width = "627px";

 i.height = "384px";

  

 

  var div = document.createElement('div');

  div.appendChild(link);

  div.appendChild(i)

$.facebox(div);

return false;

});

}); 

It constructs the close button and the iframe on the fly, so when it closes, i call remove

  $(document).bind('close.facebox', function() {

  $('#back').hide();

  i.contentDocument.close();

  i.remove(); 

  })