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

Designate

If the student can pass the quiz without ever watching the video, then why waste their time? The subject matter obviously needs to be more difficult if you want to engage your students, otherwise they'll just check-out and try to get through the lessons as quickly as possible. – Pahang

@Pahang it's not so simple. We deliver dozens of work safety courses that, by national law, must be viewed by companies workers every 6 months. These courses are all but hard or engaging, however the law dictates how they must be done. The law also demands the videos must be viewed in entirety else the worker won't receive the certification to work. – Duplessis

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.

Euhemerism

thank you for your response. Doesn't unchecking the Show Play bar after volume as well? – Designate

Is this still applicable, or do you require a Pro account? – Mazurka

@tymie I am not sure what you mean. I have a Vimeo Pro account and I am not sure if this is applicable for those with standard accounts or not. – Euhemerism

@Euhemerism - sadly i believe it does not apply unless you have a pro account – Affine

@Affine correct, there's an edit that I added to my answer to indicate this – Euhemerism

this is part of the solution but there's no way to die all controls. Hiding these just shows that small play icon in the middle which / my client think is more intrusive. – Lavery

It's strange we have a Pro account but don't see all these options, however I tried to add @Jake's ?background=1 to the url and that works perfectly fine, although that makes the video repeat endlessly, I am not sure if that is what we want or not.. – Streamer

Aha these controls are configured on the video edit page but some of them seem like hidden features like ?background=1&muted=1&autoplay=1 – Streamer

I want to control which controls to show NOT from the Vimeo editor but from the page where I embed the video: that is, either via parameters appended to the video url in the iframe, or via the JavaScript API. The obvious reason is that I may have a page that shows dozens of videos and I want all of them to use the same controls and I don't want to edit all of them in Vimeo. Or I show the same video in different pages with different controls. So how do I do that? There's nothing in the documentation – Errol

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>

Cantal

Works with title, sidedock but not controls. – Hemstitch

Answer 3

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!

Cakewalk