Video into iframe

JavaScript
1

I will try to explain my situation…

I have this code with iframe

<body>
    <div id="menu">
           <ul>
                <li><a href="videolink1" target="content"> Link 1 </a></li>
                <li><a href="videolink2" target="content"> Link 2 </a></li>
                <li><a href="videolink3" target="content"> Link 3 </a></li>
           </ul>
    </div>
    <div id="content" name="content"><iframe name="content" width="600px" height="400px" src="http://www.sitepoint.com/forums/"></iframe></div>
</body>

When i click here:

<a href="videolink1" target="content"> Link 1 </a>

Playing this video into iframe (the video include videolink1)

<embed src=player.swf width="200px" height="300px'" allowscriptaccess="always" allowfullscreen="true" flashvars="skin=Dark.zip&volume=50&displayclick=none&fullscreen=true&file=videolink1&plugins=captions,hd-1&captions.file=http://forum-maximus.net/stream/subs/forummaximus.srt&logo.file=logo.png&logo.position=top-right&logo.margin=10&logo.hide=false&logo.link=&image=fundo.png&provider=http"/>

When i click here:

<a href="videolink2" target="content"> Link 2 </a>

Playing this video into iframe (the video include videolink2)

<embed src=player.swf width="200px" height="300px'" allowscriptaccess="always" allowfullscreen="true" flashvars="skin=Dark.zip&volume=50&displayclick=none&fullscreen=true&file=videolink2&plugins=captions,hd-1&captions.file=http://forum-maximus.net/stream/subs/forummaximus.srt&logo.file=logo.png&logo.position=top-right&logo.margin=10&logo.hide=false&logo.link=&image=fundo.png&provider=http"/>

When i click here:

<a href="videolink3" target="content"> Link 3 </a>

Playing this video into iframe (the video include videolink3)

<embed src=player.swf width="200px" height="300px'" allowscriptaccess="always" allowfullscreen="true" flashvars="skin=Dark.zip&volume=50&displayclick=none&fullscreen=true&file=videolink3&plugins=captions,hd-1&captions.file=http://forum-maximus.net/stream/subs/forummaximus.srt&logo.file=logo.png&logo.position=top-right&logo.margin=10&logo.hide=false&logo.link=&image=fundo.png&provider=http"/>

etc…

It’s possible make this?

2

Hi,

Is the iframe on the same domain as the page you want to embed it in?

3

All content on the same page

4

I would probably forget about the iframe and load the videos directly into the page, then use the menu to toggle between them.
Here’s a demo of what I mean.

Here’s the code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>YouTube demo</title>
    <style>
      object{position: absolute; left:25px; top:100px;}
    </style>
  </head>

  <body>
    <div id="menu">
      <ul>
        <li><a href="#" data-film="one">Hey Yah</a></li>
        <li><a href="#" data-film="two">This is Sparta!!!!</a></li>
        <li><a href="#" data-film="three">Mormon Jesus</a></li>
      </ul>
    </div>
    
    <object type="application/x-shockwave-flash" id="one" data="http://www.youtube.com/v/ZZ5LpwO-An4?fs=1&amp;enablejsapi=1&amp;hl=en_US" width="330" height="200"><param name="allowScriptAccess" value="always"/></object>
    <object type="application/x-shockwave-flash" id="two" data="http://www.youtube.com/v/rvYZRskNV3w?fs=1&amp;enablejsapi=1&amp;hl=en_US" width="330" height="200"><param name="allowScriptAccess" value="always"/></object>
    <object type="application/x-shockwave-flash" id="three" data="http://www.youtube.com/v/46PXaJxzuDE?fs=1&amp;enablejsapi=1&amp;hl=en_US" width="330" height="200"><param name="allowScriptAccess" value="always"/></object>
    
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      $(document).ready(function(){
        $players = $('object');
        $players.css("visibility", "hidden");
        
        var $buttons = $("#menu > ul > li > a");
        $buttons.on("click", function(e){
          $players.each(function(){
            if ($(this)[0].getPlayerState() == 1){
              $(this)[0].pauseVideo();
            }
          });
        
          var film = $(this).data("film");
          $('object').css("visibility", "hidden");
          $("#" + film).css("visibility", "visible");
          e.preventDefault();
        });
      });
    </script>  
  </body>
</html>

Notice, that by setting the visibility to none (as opposed to hiding the elements in a way which would remove them from the page completely), we can also keep the state of the videos between toggle.

5

Thanks Pullo!