Youtube Iframe disable pause video

Question

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?

Answer 1

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.

Answer 2

" ?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

Answer 3

Use the following CSS on the DOM element:

.ytplayer {pointer-events: none;}

Answer 4

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);

Answer 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.

Answer 6

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.