How to Hide Vimeo Controls

Question

Our students are provided with video tutorials using Vimeo.

Once a student was done with watching the videos, s/he is presented with some quizzes.

What we discovered was that the students would use fast Forward control to move the slider forward to shorten the time it takes to watch the videos.

We want to stop that and we are wondering if there is a way to either disable or hide the fast Forward control so students are no longer able to move forward to shorten the video time.

Thanks for your help

Answer 1

1. Make sure you are logged into Vimeo.

2. Go to the video settings page: https://vimeo.com/{enter_video_id}/settings/embed

3. Uncheck Show Play Bar under Player Preferences

Edit: You must have a Plus or Pro account to use these features.

Answer 2

We can control all things in iframe see EX.

title=0   for title hide
sidedock=0  for social icon hide
controls=0 . for button hide

<iframe class="iframe" src="//player.vimeo.com/video/191777290?title=0&byline=0&portrait=0&sidedock=0" width="100%" height="430" frameborder="0" webkitallowfullscreen   mozallowfullscreen allowfullscreen>

Answer 3

Found a nice trick, posted by fredlee0109 in vimeo's github. Here is the fiddle: https://jsfiddle.net/weLtk3ma/2/ But should be mentioned that this is probably against the Vimeo API Terms of Service.

<style type="text/css">
    .top {
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        position: relative;
    }

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

    .wrapper {
        position: relative;
        padding-bottom: 200%;
        transform: translateY(-35.95%);
    }
</style>

<div class="top">
    <div class="wrapper">
        <iframe src="https://player.vimeo.com/video/15280451?title=0&byline=0&portrait=0&transparent=0&autoplay=1" width="640" height="480" frameborder="0" title="Funny Cat Videos For Kids" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ready="true"></iframe>
    </div>
</div>

Answer 4

This is my solution to prevent Vimeo fast forward - I made interaction with Vimeo API that is really brilliant.

Script remembers the moment of the video where user try to fast forward. Then js will go back to right place.

Your video:

<iframe src="{{ $video_path }}" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Remember to add vimeo script:

<script src="https://player.vimeo.com/api/player.js"></script>

JavaScript logic:

 let iframe = document.querySelector('iframe');
 let player = new Vimeo.Player(iframe);
 let playing = false;
 let simulationTime = 0;

 player.on('play', function(e) {
     playing = true;
 });

 player.on('pause', function(e) {
     playing = false;
 });

 /**
 * Event fired when user want to fast forward
 */
 player.on('seeked', function(e) {
     if (e.seconds > simulationTime) {
         player.setCurrentTime(simulationTime).then(function(seconds) {
         }).catch(function(error) {
            switch (error.name) {
                case 'RangeError':
                    // The time is less than 0 or greater than the video's duration
                    break;
                default:
                    // Some other error occurred
                    break;
            }
         });
     }
     else {
         simulationTime = data.seconds;
     }
 });

 /**
 * Keep time going
 */
 window.setInterval(function() {
     if (playing) {
         simulationTime++;
     }
 }, 1000);

Cheers!