edg3 - Freelance Digital Web Design and Umbraco Development

Vimeo Embed – Start Time & Paused

This is a simple 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 using the standard embed code the video would autoplay; which is no good if embedded out of the current viewport.

tl;dr https://codepen.io/christopher/pen/YxMmjW

HTML

<div class="embed  embed--16-9">
    <div class="embed__vimeo" data-id="229802433" data-start-at="120" id="embed1"></div>
</div>

SCSS

.embed {
    margin: 0 0 30px;
    overflow: hidden;
    position: relative;
  
    // Handle the common 16/9 and 4/3 ratios
    &--16-9 { padding-top: percentage(9/16); }
    &--4-3  { padding-top: percentage(3/4); }

    iframe {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}

JavaScript

<script src="https://player.vimeo.com/api/player.js"></script>
<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

Embedding a Vimeo video that starts paused at 2 minutes (120 seconds) in: