Modal window with streaming video with facebok

Skip to first unread message

Jorge Rodes

Mar 9, 2015, 3:18:12 AM3/9/15
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>

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() {
        $(".iframe").src("#"); //it works correctly

and when i open it:

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

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

Mar 10, 2015, 11:01:01 AM3/10/15
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:


 var link = document.createElement('a');
 link.setAttribute('href', 'javascript:void(0);');
 var cerrar = document.createTextNode("CLOSE");
link.addEventListener( 'click', function(){
} );
 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');
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() {
Reply all
Reply to author
0 new messages