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>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
​
<body>
<script type="text/javascript" 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 type="text/javascript">
$(function () {
    var iframe = $('#video')[0];
    var player = $f(iframe);
    
        
    player.addEvent('ready', function () {
        console.log('ready firing');
        player.addEvent('finish', onFinish);
    });
    
    $('.playpause').click(function () {
        console.log('playpause clicked');
        player.api('paused', function (paused) {
            console.log('paused firing');
            if (!paused) {
                player.api('pause');
                $(".playpause").removeClass('pause');
            } else {
                player.api('play');
                $(".playpause").addClass('pause');
            }
        });
    });
    
    function onFinish(id) {
        $(".playpause").removeClass('pause');
    }
    
});
</script>
<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>
</html>
​
 
@charset "utf-8";
/* CSS Document */
​
​
.parent {
    width:90%;
    margin:50px auto;
    position:relative;
    z-index:10;
}
/* set up the aspect ratio of the video */
 .overlay {
    width:100%;
    height:0;
    padding-bottom:56.25%;
    overflow:hidden;
    position:relative;
    margin:0 auto;
 
}
​
​
/* hide the default video controls */
 .overlay iframe {
    width:100%;
    height:180%;
    position:absolute;
    left:0;
    top:-40%;
    z-index:-1;
}
/* Use CSS art to draw the 'Play / Pause' button */
 .playpause {
    width:68px;
    height:40px;
    background: transparent;
   border: solid #fff 2px;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
 
    
    margin:auto;
    z-index:100;
    opacity:1;
    cursor:pointer;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.playpause:before {
    display:block;
    content:"";
    width:0;
    height:0;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:20px solid #fff;
    position:absolute;
    left:26px;
    top:10px;
}
.playpause.pause {
    opacity:0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.playpause.pause:before {
    display:block;
    content:"";
    width:6px;
    height:20px;
    border-left:6px solid #fff;
    border-right:6px solid #fff;
    border-width:0 6px;
}
.playpause:hover {
    border: solid transparent 2px;
}
.overlay:hover .playpause {
    opacity:1;
}
@media only screen and (max-width:768px) {
    .parent {
        width:90%;
        margin:50px auto;
    }
}
/* fixes for the iPhone and iPad to show default controls */
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .overlay iframe {
        height:100%;
        top:0;
        z-index:200;
    }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .overlay iframe {
        height:100%;
        top:0;
        z-index:200;
    }
}
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
    .overlay iframe {
        height:100%;
        top:0;
        z-index:200;
    }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
    .overlay iframe {
        height:100%;
        top:0;
        z-index:200;
    }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .overlay iframe {
        height:100%;
        top:0;
        z-index:200;
    }
}
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers