how to overide the onclick event attached to a button

March 1, 2023

How can I replace the onclick binding of a button with another function? So for example I have a player below. Currently, when you click on the full-screen icon the player goes into fullscreen mode. How can I override that function and instead of going to the fullscreen mode it just console.log that the button has been pressed? Thanks in advance.

EDIT: Both methods suggested by @freedomn-m didn’t work. I have added the suggested methods to the code below.

const player = new Plyr('#player')

//didn't work
$('.plyr--fullscreen-enabled [data-plyr=fullscreen]').off("click").on("click", function() {
  console.log('fullscreen btn clicked')
});

//didn't work
$('.plyr--fullscreen-enabled [data-plyr=fullscreen]').on("click", function(event) {
  console.log('fullscreen btn clicked')
  event.stopImmediatePropagation();
});

.wrapper {
  width: 100%;
  height: 50vh;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
<script src="https://cdn.plyr.io/3.7.3/plyr.polyfilled.js"></script>

<div class="wrapper">
  <video id="player" playsinline controls data-poster="/path/to/poster.jpg">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" />
  </video>
</div>

>Solution :

If you check the docs you can see an option to just disable fullscreen.

const player = new Plyr('#player', {fullscreen: false})

.wrapper {
  width: 100%;
  height: 50vh;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
<script src="https://cdn.plyr.io/3.7.3/plyr.polyfilled.js"></script>

<div class="wrapper">
  <video id="player" playsinline controls data-poster="/path/to/poster.jpg">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" />
  </video>
</div>

Another (hacky) approach would be to immediately exit fullscreen once you enter it.

const player = new Plyr('#player')

player.on("enterfullscreen", function(event) {
  player.fullscreen.exit()
});

.wrapper {
  width: 100%;
  height: 50vh;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
<script src="https://cdn.plyr.io/3.7.3/plyr.polyfilled.js"></script>

<div class="wrapper">
  <video id="player" playsinline controls data-poster="/path/to/poster.jpg">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" />
  </video>
</div>