Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="Untitled-2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="parent">
    <div class="overlay">
        <iframe src="https://player.vimeo.com/video/134945180?api=1&player_id=video" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen id="video"></iframe>
        <div class="playpause start"></div>
    </div>
</div>
</body>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
$(function () {
    var iframe = document.getElementById('video');
    var player = $f(iframe);
    
    player.addEvent('ready', function () {
        player.addEvent('finish', onFinish);
    });
    
    $('.playpause').click(function () {
        player.api('paused', function (paused) {
            if (!paused) {
                player.api('pause');
                $(".playpause").removeClass('pause');
            } else {
                player.api('play');
                $(".playpause").addClass('pause');
            }
        });
    });
    
    function onFinish(id) {
        $(".playpause").removeClass('pause');
    }
    
});
</script>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers