Forum Discussion

ISD650's avatar
ISD650
Community Member
4 days ago
Solved

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 know I can hide the seekbar and play button per slide, but I still want to show the seekbar to show progress. I can turn off the play/pause button for entire project under player properties, but I would like to do this with one slide only. Please advise.

storyline 360
  • stefanocraba's avatar
    stefanocraba
    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 = '';
});

     

2 Replies

  • stefanocraba's avatar
    stefanocraba
    Community Member
    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 = '';
});

     

  • ISD650's avatar
    ISD650
    Community Member
    1 day ago

    Hi, this worked exactly as I was wanted to do. Thank you for your help!