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>