Search code examples
javascriptvideovimeo

Disabling stopping of video by clicking on screen in Vimeo


I am trying to figure out following "issue" that I have with Vimeo Player (I am using Vimeo Plus for better functionality).

a) I would like to try to disable the option that when an user clicks on the video, the video stops. Even though I hide almost everything, the video still can be stopped by clicking on it when it is playing. I would like to try to disable this. Or disable any interaction of user with the video (e.g. mouse cursor is disabled or ignored in area of video).

b) If above is not possible I would like to at least display to the user an alternative message, for example "You have stopped the video. Please click on the video again to play it." or when the user stops it to auto-play the video again.

Thank you for any suggestions for an answer or information leading to an answer.

To explain a bit further. The development is ongoing inside a platform called Qualtrics (https://en.wikipedia.org/wiki/Qualtrics).

The basic code:

<!DOCTYPE html>
<html>
 <head>
  <title>Experiment</title>
 </head>
 <body>

  <div style="text-align: center;">
   <iframe allowfullscreen="" frameborder="0" height="360" mozallowfullscreen=""src="https://player.vimeo.com/video/ANONYM?autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0" webkitallowfullscreen="" width="640">
   </iframe>
  </div>

 </body>
</html>

I am not able to figure out how to disable it. Therefore I am posting only the current code with auto-play and the features that I know how to use.


Solution

  • You have to create another layer (an empty div) under your iframe which will catch all events.

    Sample:

    <html>
      <head>
        <title>Vimeo</title>
      </head>
      <style type="text/css">
        #box {
    
          position: absolute; 
          width: 640px;
          height: 360px;
          margin-top: -360px;
          border: 2px solid green;
        }
      </style>
      <body>
        <iframe src="https://player.vimeo.com/video/83611065?color=ff9933&autoplay=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen autoplay></iframe>
        <div id="box"></div>
      </body>
    </html>
    

    Demo