How to Hide Vimeo Controls

2019-02-03 11:40发布

问题:

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

回答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.



回答2:

Found a nice trick, posted by fredlee0109 in vimeo's github. Here is the fiddle: https://jsfiddle.net/s4h4o52z/1/ 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/236241664?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>


回答3:

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>