<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="popupVid" style="width:500px;height:auto;">
<iframe width="500" height="315"
src="http://www.youtube.com/embed/y9QEQHe8ax4?enablejsapi=1&autoplay=1"
frameborder="0" allowfullscreen></iframe>
</body>
</html>
function toggleVideo(state) {
// if state == 'pause', pause. Else: play video
var iframe = document.querySelector("iframe").contentWindow;
if (state === 'pause') {
document.title = '|| paused.';
iframe.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
document.body.style.background = "lightgray";
} else {
document.title = '> playing...';
iframe.postMessage('{"event":"command","func":"playVideo","args":""}','*');
document.body.style.background = "lightgreen";
}
}
var focus = false;
window.onblur = function() { focus=false; toggleVideo('pause'); }
window.onfocus = function(){ focus=true; toggleVideo(); }
document.onblur = window.onblur;
document.focus = window.focus;
var vis = (function(){
var stateKey, eventKey, keys = {
hidden: "visibilitychange",
webkitHidden: "webkitvisibilitychange",
mozHidden: "mozvisibilitychange",
msHidden: "msvisibilitychange"
};
for (stateKey in keys) {
if (stateKey in document) {
eventKey = keys[stateKey];
break;
}
}
return function(c) {
if (c) document.addEventListener(eventKey, c);
return !document[stateKey];
}
})();
vis(function(){
if (vis()) toggleVideo();
else toggleVideo('pause');
});
setTimeout(function() { if(focus) toggleVideo(); else toggleVideo('pause'); }, 1000);
Output
300px
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |