How to replace play/pause icon toggle with text

Question

I am currently struggling with a way to replace the play/pause icons with text while still maintaining the toggle animation.

I am trying to understand exactly which JS code is rendering the icons, and secondly remove/ hide them, so they can be replaced by text

I am still beginner level with JS, any help would be much appreciated

var tl = new TimelineMax(),
  $videoContainer = $('.cb-video-container'),
  $video = $videoContainer.find('.video'),
  $playPauseClickArea = $videoContainer.find('.play-pause--click-area'),
  $playPauseContainer = $videoContainer.find('.play-pause--container'),
  $playIcon = $videoContainer.find('.play-icon'),
  $pauseIcon = $videoContainer.find('.pause-icon'),

  iconIsToggled = false,
  iconEase = Back.easeInOut.config(1.7),
  iconDuration = 0.3;

setupVideo();

// functions 
function setupVideo() {
  TweenMax.set($pauseIcon, {
    autoAlpha: 0,
    scale: 0
  });
  TweenMax.set($playPauseClickArea, {
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  })
};

function showPaused() {
  iconIsToggled = true;

  tl.play();
  tl.to($playIcon, iconDuration, {
    autoAlpha: 0,
    scale: 0,
    ease: iconEase
  }, 0);
  tl.to($pauseIcon, iconDuration, {
    autoAlpha: 1,
    scale: 1,
    ease: iconEase
  }, 0);

  TweenMax.to($playPauseClickArea, iconDuration, {
    backgroundColor: 'rgba(0, 0, 0, 0)'
  }, 0)

  console.log('playing - show pause');
  $video.get(0).play();
}

function showPlay() {
  iconIsToggled = false;

  tl.reverse();

  TweenMax.to($playPauseClickArea, iconDuration, {
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  }, 0)

  console.log('paused - show play');
  $video.get(0).pause();
}

// event handlers
$playPauseClickArea.on('click', function() {
  !iconIsToggled ? showPaused() : showPlay();
});

$playPauseClickArea.on('mouseleave', function() {
  if (iconIsToggled === true) TweenMax.to($playPauseContainer, iconDuration, {
    autoAlpha: 0
  }, 0);
  console.log('mouseleave');
});

$playPauseClickArea.on('mouseenter', function() {
  TweenMax.to($playPauseContainer, iconDuration, {
    autoAlpha: 1
  }, 0);
  console.log('mouseenter');
});

$video.on('ended', function() {
  // TODO: showReplay()
  console.log('video ended')
});

* {
  color: #fff;
}

.cb-video-container {
  position: relative;
  padding: 0;
}

.video {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.play-pause--click-area {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
}

.play-pause--container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
}

.play-pause--container .play-pause--icon {
  margin: auto;
  right: 0;
  left: 0;
  position: absolute;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

.play-pause--container .play-icon {
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-bottom-width: 15px;
  border-top-width: 15px;
  border-left: 25px solid #fff;
}

.play-pause--container .play-icon:after {
  content: 'Play';
  font-size: 2.2rem;
  line-height: 0.3;
  background: inherit;
  width: 10px;
  height: 30px;
  left: 15px;
  position: absolute;
}

.play-pause--container .pause-icon {
  background-color: #fff;
  width: 10px;
  height: 30px;
  left: -10px;
  position: absolute;
}

.play-pause--container .pause-icon:after {
  content: 'Pause';
  font-size: 2.2rem;
  line-height: 1.2;
  background: inherit;
  width: 10px;
  height: 30px;
  left: 15px;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

<div class="cb-video-container">
  <video loop class="video" preload="auto">
    <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4" />
    Your browser does not support HTML5 video.
  </video>
  <div class="play-pause--click-area">
    <div class="play-pause--container center-xy">
      <div class="play-pause--icon play-icon"></div>
      <div class="play-pause--icon pause-icon"></div>
    </div>
  </div>
</div>

Answer 1

var tl = new TimelineMax(),
  $videoContainer = $('.cb-video-container'),
  $video = $videoContainer.find('.video'),
  $playPauseClickArea = $videoContainer.find('.play-pause--click-area'),
  $playPauseContainer = $videoContainer.find('.play-pause--container'),
  $playIcon = $videoContainer.find('.play-icon'),
  $pauseIcon = $videoContainer.find('.pause-icon'),

  iconIsToggled = false,
  iconEase = Back.easeInOut.config(1.7),
  iconDuration = 0.3;

setupVideo();

// functions 
function setupVideo() {
  TweenMax.set($pauseIcon, {
    autoAlpha: 0,
    scale: 0
  });
  TweenMax.set($playPauseClickArea, {
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  })
};

function showPaused() {
  iconIsToggled = true;

  tl.play();
  tl.to($playIcon, iconDuration, {
    autoAlpha: 0,
    scale: 0,
    ease: iconEase
  }, 0);
  tl.to($pauseIcon, iconDuration, {
    autoAlpha: 1,
    scale: 1,
    ease: iconEase
  }, 0);

  TweenMax.to($playPauseClickArea, iconDuration, {
    backgroundColor: 'rgba(0, 0, 0, 0)'
  }, 0)

  console.log('playing - show pause');
  $video.get(0).play();
}

function showPlay() {
  iconIsToggled = false;

  tl.reverse();

  TweenMax.to($playPauseClickArea, iconDuration, {
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  }, 0)

  console.log('paused - show play');
  $video.get(0).pause();
}

// event handlers
$playPauseClickArea.on('click', function() {
  !iconIsToggled ? showPaused() : showPlay();
});

$playPauseClickArea.on('mouseleave', function() {
  if (iconIsToggled === true) TweenMax.to($playPauseContainer, iconDuration, {
    autoAlpha: 0
  }, 0);
  console.log('mouseleave');
});

$playPauseClickArea.on('mouseenter', function() {
  TweenMax.to($playPauseContainer, iconDuration, {
    autoAlpha: 1
  }, 0);
  console.log('mouseenter');
});

$video.on('ended', function() {
  // TODO: showReplay()
  console.log('video ended')
});

* {
  color: #fff;
}

.cb-video-container {
  position: relative;
  padding: 0;
}

.video {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.play-pause--click-area {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
}

.play-pause--container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
}

.play-pause--container .play-pause--icon {
  margin: auto;
  right: 0;
  left: 0;
  position: absolute;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}


.play-pause--container .play-icon:after {
  content: 'Play';
  font-size: 2.2rem;
  line-height: 0.3;
  background: inherit;
  width: 10px;
  height: 30px;
  left: 15px;
  position: absolute;
}

.play-pause--container .pause-icon:after {
  content: 'Pause';
  font-size: 2.2rem;
  line-height: 1.2;
  background: inherit;
  width: 10px;
  height: 30px;
  left: 15px;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

<div class="cb-video-container">
  <video loop class="video" preload="auto">
    <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4" />
    Your browser does not support HTML5 video.
  </video>
  <div class="play-pause--click-area">
    <div class="play-pause--container center-xy">
      <div class="play-pause--icon play-icon"></div>
      <div class="play-pause--icon pause-icon"></div>
    </div>
  </div>
</div>

The icon is implemented with CSS. To remove Play icon, for example, you just need to remove this code:

.play-pause--container .play-icon {
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-bottom-width: 15px;
  border-top-width: 15px;
  border-left: 25px solid #fff;
}

Answer 2

Just change you CSS code with the below code and it helps you. Also, I have aligned both text Play and Pause with same offset.

Try below code-

var tl = new TimelineMax(),
  $videoContainer = $('.cb-video-container'),
  $video = $videoContainer.find('.video'),
  $playPauseClickArea = $videoContainer.find('.play-pause--click-area'),
  $playPauseContainer = $videoContainer.find('.play-pause--container'),
  $playIcon = $videoContainer.find('.play-icon'),
  $pauseIcon = $videoContainer.find('.pause-icon'),

  iconIsToggled = false,
  iconEase = Back.easeInOut.config(1.7),
  iconDuration = 0.3;

setupVideo();

// functions 
function setupVideo() {
  TweenMax.set($pauseIcon, {
    autoAlpha: 0,
    scale: 0
  });
  TweenMax.set($playPauseClickArea, {
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  })
};

function showPaused() {
  iconIsToggled = true;

  tl.play();
  tl.to($playIcon, iconDuration, {
    autoAlpha: 0,
    scale: 0,
    ease: iconEase
  }, 0);
  tl.to($pauseIcon, iconDuration, {
    autoAlpha: 1,
    scale: 1,
    ease: iconEase
  }, 0);

  TweenMax.to($playPauseClickArea, iconDuration, {
    backgroundColor: 'rgba(0, 0, 0, 0)'
  }, 0)

  console.log('playing - show pause');
  $video.get(0).play();
}

function showPlay() {
  iconIsToggled = false;

  tl.reverse();

  TweenMax.to($playPauseClickArea, iconDuration, {
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  }, 0)

  console.log('paused - show play');
  $video.get(0).pause();
}

// event handlers
$playPauseClickArea.on('click', function() {
  !iconIsToggled ? showPaused() : showPlay();
});

$playPauseClickArea.on('mouseleave', function() {
  if (iconIsToggled === true) TweenMax.to($playPauseContainer, iconDuration, {
    autoAlpha: 0
  }, 0);
  //console.log('mouseleave');
});

$playPauseClickArea.on('mouseenter', function() {
  TweenMax.to($playPauseContainer, iconDuration, {
    autoAlpha: 1
  }, 0);
  //console.log('mouseenter');
});

$video.on('ended', function() {
  // TODO: showReplay()
  console.log('video ended')
});

* {
  color: #fff;
}

.cb-video-container {
  position: relative;
  padding: 0;
}

.video {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.play-pause--click-area {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
}

.play-pause--container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
}

.play-pause--container .play-pause--icon {
  margin: auto;
  right: 0;
  left: 0;
  position: absolute;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

.play-pause--container .play-icon {
  width: 0;
  height: 0;
}

.play-pause--container .play-icon:after {
  content: 'Play';
  font-size: 2.2rem;
  line-height: 0.3;
  background: inherit;
  width: 10px;
  height: 30px;
  position: absolute;
}

.play-pause--container .pause-icon {
  width: 10px;
  height: 30px;
  left: 0px;
  position: absolute;
  top: -15px;
}

.play-pause--container .pause-icon:after {
  content: 'Pause';
  font-size: 2.2rem;
  line-height: 1.2;
  background: inherit;
  width: 10px;
  height: 30px;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

<div class="cb-video-container">
  <video loop class="video" preload="auto">
    <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4" />
    Your browser does not support HTML5 video.
  </video>
  <div class="play-pause--click-area">
    <div class="play-pause--container center-xy">
      <div class="play-pause--icon play-icon"></div>
      <div class="play-pause--icon pause-icon"></div>
    </div>
  </div>
</div>