Note: This post is out-of-date as Vimeo now supports this natively.
This is an example using the Vimeo Player API (JS) demonstrating the ability to embed a video that starts at a specific point, but is also paused. By default the standard embed code would autoplay at the desired pause/start time.
tl;dr https://codepen.io/christopher/pen/YxMmjW
HTML
We start with an outer .embed wrapper for responsiveness and inside that setup our custom Vimeo embed element. It’s important to note that a unique id is required by the Vimeo API.
<div class="embed embed-16by9">
<div class="embed-vimeo" data-id="229802433" data-start-at="120" id="embed1"></div>
</div>SCSS
This is pretty much taken from the Bootstrap embed utility for simplicity.
.embed {
margin: 0 0 40px;
overflow: hidden;
position: relative;
// Handle the common 16/9 and 4/3 ratios
&--16by9 { padding-top: percentage(9/16); }
&--4by3 { padding-top: percentage(3/4); }
iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}JavaScript
I have commented each line of the JavaScript to make it nice and easy to follow, be sure to include the Vimeo player API (<script src="https://player.vimeo.com/api/player.js"></script>) on your page (ideally just before the </body> tag).
<script>
var videos = document.getElementsByClassName('embed-vimeo'); // get all of the '.embed-vimeo' items
[].forEach.call(videos, function(element, index, array) { // loop through each item
var id = element.getAttribute('id'), // unique id of the video element
videoId = element.getAttribute('data-id'), // id of the Vimeo video
startAt = element.getAttribute('data-start-at'), // time to start at
playerOptions = { id : videoId, width : 1280 }, // options to be passed to the player
player = new Vimeo.Player(id, playerOptions); // create a new instance of the player
if (startAt != undefined) { // do we have a "start-at" value?
if (!isNaN(parseFloat(startAt)) && isFinite(startAt)) { // is the "start-at" value numeric?
player.on('loaded', function(data) { // okay, once the video has loaded...
player.setCurrentTime(startAt).then(function(seconds) { // set the "start-at" time, and then...
player.pause(); // pause the video
});
});
}
}
});
</script>Demo
I have setup an example on CodePen to demonstrate embedding a Vimeo video that starts paused at 2 minutes (120 seconds); you can view it here.