16

I need to play video on my web-page. But I need to deny control. I put "controls=0", but player has pause action when I click on it. Can I disable "pause" action in YouTube player?

Sergei Gorjunov
  • 1,789
  • 1
  • 14
  • 22

7 Answers7

28

Use the following CSS on the DOM element:

.ytplayer {pointer-events: none;}
arno
  • 792
  • 14
  • 33
osiris rodriguez
  • 378
  • 3
  • 7
24

You can try putting a div container over the video with nothing on it. In other words a blank container the same size as the video itself. What this should do is when someone tries to click on it, they will actually be clicking on the transparent container over it and won't be able to pause. This should work. You may also need to change the z-index to make sure the blank div container is truly over the video. (Test div container first with a background color and if the colored box covers the video then you can go back and remove the color and it will work the same.) Good luck.

Also, set the disablekb parameter to 1 so that user cannot pause even by space-bar.

nole
  • 563
  • 1
  • 5
  • 16
Gus
  • 241
  • 1
  • 2
  • 4
    Does this violate YouTube's terms of service? – JAL Dec 04 '14 at 23:58
  • Not sure really, maybe violation of 2b under Permissions and Restrictions *limit the use of the Service or Content;* https://www.youtube.com/static?template=terms#ad6952fd3c – ThisClark Feb 01 '20 at 15:36
10

If you're displaying you video through HTML and have access to the CSS class used to display your video, you can do the following.

Your HTML will look something like this:

<iframe id="ytplayer" type="text/html" width="720" height="405"
src="https://www.youtube.com/watch?v=z4O-5eV4LiA"
frameborder="0" allowfullscreen>

add a class name of your choice, I choose ytplayer

class="ytplayer"

it will look like the following with my example

<iframe class="ytplayer" id="ytplayer" type="text/html" width="720" height="405"
src="https://www.youtube.com/watch?v=z4O-5eV4LiA"
frameborder="0" allowfullscreen>

Then in your CSS file add rules for modifying your class. I used ytplayer but you may choose a different class name, be sure that it matches the one you used above.

.ytplayer {
pointer-events: none;
position: absolute;
}

That should do it.

John Doe
  • 101
  • 1
  • 2
5

There's no way to disable pausing entirely.

You could listen for YT.PlayerState.PAUSED events in an onStateChange handler and immediately call playVideo() when you detect one, but... I don't know, that sounds like it wouldn't be very user-friendly.

Jeff Posnick
  • 53,580
  • 14
  • 141
  • 167
1

" ?controls=0 " only hide the bottom control panel in the player but while clicking on the screen play/pause will work as normal

here are the control parameter values:

  • controls=0 – Player controls do not display in the player. For AS3 players, the Flash player loads immediately.
  • controls=1 – Player controls display in the player. For AS3 players, the Flash player loads immediately.
  • controls=2 – Player controls display in the player. For AS3 players, the Flash player loads afer the user initiates the video playback.

check this article this is really helpful https://developers.google.com/youtube/player_parameters

Roy Sonasish
  • 4,571
  • 20
  • 31
0

Here is a way to block the screen so the user can't click anything.

// block screen so user cant click
var blockDiv = $(document.createElement('div'))
        .attr('id', 'blockDiv')
        .height('100%').width('100%')
        .css({'z-index':'3333', 'position' : 'absolute', 'top': '0', 'left':'0'});
$('body').append(blockDiv);
cmac
  • 3,123
  • 6
  • 36
  • 49
0

This is my code solution to get the video to auto play without the ability to pause on desktop but allow on mobile

  <style>
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    /* knock out nasty borders */
    outline: 2px solid white !important;
    outline-offset: -1px;
    pointer-events: none;
  }

  .wrapper-with-intrinsic-ratio {
    position: relative;
    padding-bottom: 56.25%;
  }

  .element-to-stretch iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffff;
  }

  .wrapper-with-intrinsic-ratio .element-to-stretch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  @media only screen and (max-width: 900px) {
    .noclick {
      display: none;
    }
  }

  .noclick {
    z-index: 2000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
<div class="target2">
<div class="noclick"></div>
<div class="wrapper-with-intrinsic-ratio">
<div class="element-to-stretch">
<div class="overlay"><iframe title="YouTube video player" src="https://www.youtube.com/embed/tgbNymZ7vqY?rel=0&amp;autoplay=1&amp;controls=0&amp;disablekb=1&amp;loop=1&amp;playlist=tgbNymZ7vqY&amp;playsinline=1&amp;iv_load_policy=3&amp;mute=1&amp;widgetid=1&amp;widget_referrer" width="100%" height="100%" frameborder="0" allowfullscreen=""></iframe></div>
</div>
</div>
</div>

Note to made the video repeat and not autoplay the next item on the playlist set the playlist to the video id(youtube) does not do video recommendations on mobile in browser videos

Corey Deschambault
  • 3
  • 1