Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
​
</head>
<body>
    <div id="vid1">
          <video id="Video1" class="videos">
          <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>  
         HTML5 Video is required for this example. 
    </video>
    </div>
    
    <div id="vid2">
          <video id="Video2" class="videos">
          <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>  
         HTML5 Video is required for this example. 
    </video>
    </div>
     
    <div id="vid3">
          <video id="Video3" class="videos">
          <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"></source>  
         HTML5 Video is required for this example. 
    </video>
    </div>
​
​
<div id="cont1"><br>first container<br></div>
<div id="cont2"><br>second container<br></div>
<div id="cont3"><br>third container<br></div>
</body>
</html>
 
$(window).load(function()
{
    //add event for all videos 
    $('.videos').click(videoClicked);
​
​
  //remember last video clicked (you could check last container instead)
var lastclicked;
  
function videoClicked(e)
{
    //get a reference to the video clicked
    var sender = e.target;
  //get all the videos 
    var $videos = $('.videos');  
  
    if(sender==lastclicked){
      //reset to original positions
      
      $.each($videos,function(){
        var ind =     this.id.substring(this.id.length-1); //based on the video + number naming convention
        $(this).appendTo('#vid' + ind);
      });
      lastclicked = null;
      return;
    }
  
    lastclicked= sender;  
    
     var i = 1;  
     //place all non clicked videos in cont1/cont2/etc
     $.each($videos.not(sender),function()
     { 
       $(this).appendTo('#cont' + i++ );
     });
  
     //place the clicked video in the last container
     $(sender).appendTo('#cont' + i ); //always cont3 with fixed divs, but this is dynamic in case you add more    
​
}
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers