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-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <div id="video1"></div>
<div id="video2"></div>
  
  
<img src="http://placehold.it/100x100" onClick="startVideo1()" />
<img src="http://placehold.it/100x100" onClick="startVideo2()" />
  
​
</body>
</html>
 
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
​
var player1;
var player2;
​
function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('video1', {
        width: '320',
        height: '216',
        videoId: 'ep0_0W0qWsc',
        playerVars: {
            rel: 0,
            controls: 0,
            autohide: 1,
            disablekb: 1,
            enablejsapi: 1,
            modestbranding: 1,
            showinfo: 0
        },
        events: {
            'onStateChange': onPlayerStateChange1
        }
    });
    player2 = new YT.Player('video2', {
        width: '320',
        height: '216',
        videoId: 'vGotlqDeUGk',
        playerVars: {
            rel: 0,
            controls: 0,
            autohide: 1,
            disablekb: 1,
            enablejsapi: 1,
            modestbranding: 1,
            showinfo: 0
        },
        events: {
            'onStateChange': onPlayerStateChange2
        }
    });
}
​
function startVideo1() {
    player1.playVideo();
    $('#video_box_B1').delay(1000).fadeIn();
    $("#video_box_B1").delay(20000).hide();
}
​
function onPlayerStateChange1(event) {
    if (event.data === 2) {
        $("#video_box_B1").hide();
    }
}
​
function startVideo2() {
    player2.playVideo();
    $('#video_box_E5').delay(1000).fadeIn();
    $("#video_box_E5").delay(20000).hide();
}
​
function onPlayerStateChange2(event) {
    if (event.data === 2) {
        $("#video_box_E5").hide();
    }
}
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers