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://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <script src="http://www.youtube.com/player_api"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <a id="openModal" href="">Open Modal</a>
​
  <div id="openM" class="modalDialog">
    <div id="openMContainter">
      <div id="cl">
        <a id="close" href="" title="Close" class="close">X</a>
      </div>    
      <div id="player">
            
      </div>
    </div>
    
</div>
  
</body>
</html>
 
​
div#openMContainter { width: 600px; height: auto; overflow: hidden; display:block; }
div#player  { display:block; width:600px; height:auto; }
​
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
​
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
​
.modalDialog > div {
    width: 600px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
​
​
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
​
.close:hover { background: #00d9ff; }
 
var player;
var info;
​
​
$('#' +"openModal").click(function(e){
  e.preventDefault();
  
  info=new YT.Player('player', {
                height: '338',
                width: '620',
                videoId: 'v5DpxbNCyo0',
                playerVars : {
                    playerapiid:'player1',
                    rel: '0',
                    wmode: 'transparent',
                    modestbranding: '1'
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            }); 
  $('#player').html(info);
  document.location.href='#'+"openM";
});
​
 function onPlayerReady(event) {
        event.target.playVideo();
        $("close").click(function(){
          e.preventDefault();
          event.target.stopVideo();
          document.location.href='#'+"close";
        });
    }
​
    function onPlayerStateChange(event) {        
        if(event.data === 0) {
            idplayer="http://www.youtube.com/";
            window.location.assign(idplayer);
        }
    }
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers