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 YouT

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

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 4

Use the following CSS on the DOM element:

.ytplayer {pointer-events: none;}

Answer 5

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

Answer 6

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.