How can I prevent a user from fast-forwarding/scrubbing/skipping ahead in an embedded YouTube video?

Question

I'd like to present an embedded HTML YouTube video to a user, and prevent them from fast-forwarding or skipping to the end of the video. I can get most of the way there by using YouTube's API to remove the player controls (see code snippet), however on iOS it's still possible to get the video to run in the native player (along with its scrub controls) by pinching-to-zoom. Is there any easy way of doing this?

I should note, I've also tried using a .m4v video as a file instead which gives more options in HTML5, but that's not an ideal solution for me right now (bandwidth and download issues).

var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'KjLYjf4B7xQ',
          events: {
            'onReady': onPlayerReady
          },
         playerVars: {rel: 0, 
                      showinfo: 0, 
                      controls: 0, 
                      disablekb: 1,
                      modestbranding: 1,
                      cc_load_policy: 1,
                      playsinline: 1}
        });
      }

      function onPlayerReady(event) {
        event.target.playVideo();
      }

<div id="player"></div>

(I tried getting this to run as a snippet but there were cross-origin errors.)

Any help is appreciated. Thanks!

Edit: in addition to Mauricio's answer I also had to add a button to start the video, because the user can't click inside the video to start it. Something like this:

  function onPlayerReady(event) {
    event.target.playVideo();

    var playButton = document.getElementById("play-button");
    playButton.addEventListener("click", function() {
       player.playVideo();
    });
  }

And for the button:

<button id="play-button">Play Video</button>

Can you share the exact error you have encountered so that the community could check your problem? — MαπμQμαπkγVπ.0, Jan 30 '19 at 10:17
There were no errors, I just want to prevent users from scrubbing the video. — Steve, Jan 30 '19 at 14:42
How would you have embedded a video file rather than a YouTube video? — Voldemort's Wrath, Apr 28 '21 at 20:09

score 1 · Answer 1 · answered Jun 19 '23 at 10:57

1

I’m sure you can target the video progress bar using the same line of code to prevent users scrubbing, this should allow you to do it without effecting all of the other player controls

answered Jun 19 '23 at 10:57

Jay

11
1

score -1 · Accepted Answer · answered Jan 30 '19 at 16:40

-1

If you need disable the user interactions with the video, you can add a css style to the div that contains the iframe.

In this case, add the following css style:

pointer-events: none

So, the CSS would be as follows:

#player {
  pointer-events: none;
}

answered Jan 30 '19 at 16:40

Mauricio Arias Olave

2,259
4
25
70

1

That keeps the user from viewing full-screen; however, they need to click to start the video and are unable to with this solution. I can add a button to actually start the video which seems to work on iOS 12 using Safari and Chrome, which isn't perfect but allows them to start the video. I'll update my question and give you credit. – Steve Jan 31 '19 at 20:21
@Steve thank you for your feedback. For avoid the user click the video for play it, you can also add in the `playerVars` object the `'autoplay': 1`. I tried in jsfiddle *(when I was attempting to answer your question)*, but I was unable to set the autoplay working. Here is a [jsfiddle](https://jsfiddle.net/MauricioSOes/m96g7wsc/) with the autoplay set to `1`. I believe I was unable to autoplay the video due the order of the parameters... – Mauricio Arias Olave Jan 31 '19 at 20:51
1

Thanks @Mauricio but setting autoplay won't work on mobile, they still need to click to start the video, see https://stackoverflow.com/a/48442630/7179741 – Steve Jan 31 '19 at 22:12
@Steve - Not if he were to implement his own HTML Controls. You could certainly build something like this https://github.com/vimeo/player.js/issues/52 And the rest of the controls like this. https://demo.tutorialzine.com/2015/08/how-to-control-youtubes-video-player-with-javascript/ – Bonez024 Apr 29 '22 at 16:15
1

@Bonez024 Yes, those controls are helpful -- and could provide an alternative to the playback button that I added on to my original question. But the main issue is to keep the user from scrubbing to the end. The only solution (that I know of) is to add the point-events: none CSS over the top of the player. – Steve Apr 29 '22 at 21:10

How can I prevent a user from fast-forwarding/scrubbing/skipping ahead in an embedded YouTube video?

2 Answers2