Forum Discussion
ISD650
4 days agoCommunity Member
Hide play/pause button for one slide but keep seekbar visible
I have one slide with an embedded video that I want the learner to interact with. I want them to click on the video to play the video and not click on the play/pause button on the slide navigation. I...
- 3 days ago
hi; try this:
Add a trigger on the slide: Execute JavaScript → When the timeline starts on this slide, and paste this in:(function () { // Try the likely selectors for the modern player's play/pause button var selectors = ['#play-pause', '#play-pause-btn', 'button[data-model-id="play-pause"]']; var found = false; selectors.forEach(function (sel) { var el = document.querySelector(sel); if (el) { el.style.display = 'none'; found = true; } }); if (!found) { console.warn('Play/pause button not found, check the selector with DevTools'); } })();The play/pause button lives in the player, not the slide, so it stays hidden on every following slide too. To bring it back, add a second Execute JavaScript trigger, either on the next slide or on this one when the user clicks Next, with:
['#play-pause', '#play-pause-btn', 'button[data-model-id="play-pause"]'].forEach(function (sel) { var el = document.querySelector(sel); if (el) el.style.display = ''; });
stefanocraba
3 days agoCommunity Member
hi; try this:
Add a trigger on the slide: Execute JavaScript → When the timeline starts on this slide, and paste this in:
(function () {
// Try the likely selectors for the modern player's play/pause button
var selectors = ['#play-pause', '#play-pause-btn', 'button[data-model-id="play-pause"]'];
var found = false;
selectors.forEach(function (sel) {
var el = document.querySelector(sel);
if (el) {
el.style.display = 'none';
found = true;
}
});
if (!found) {
console.warn('Play/pause button not found, check the selector with DevTools');
}
})();
The play/pause button lives in the player, not the slide, so it stays hidden on every following slide too. To bring it back, add a second Execute JavaScript trigger, either on the next slide or on this one when the user clicks Next, with:
['#play-pause', '#play-pause-btn', 'button[data-model-id="play-pause"]'].forEach(function (sel) {
var el = document.querySelector(sel);
if (el) el.style.display = '';
});
Related Content
- 5 months ago