Custom Play/Pause Button For YouTube Video

This code creates custom play/pause button for YouTube videos. It uses SVG shapes as buttons. It allows users to play or pause the video without using YouTube’s default controls. The JavaScript code links these buttons to the YouTube video player, enabling the video to be controlled externally. It helps customize video controls and enhance user experience.

You can use this code on websites with embedded YouTube videos. It helps to customize video controls, offering a more branded and seamless experience for your users.

How to Create Custom Play/pause Button For Youtube Video

1. First of all, load the Normalize CSS by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. Create an HTML structure with an iframe containing the YouTube video and SVG elements for play/pause buttons.

<h1>Pause / Play Buttons for YouTube Videos</h1>

<!-- Make sure ?enablejsapi=1 is on URL -->
<iframe id="video" src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1&html5=1&mute=1" frameborder="0" allowfullscreen></iframe>

<svg class="defs">
  <defs>
    <path id="pause-button-shape" d="M24,0C10.745,0,0,10.745,0,24s10.745,24,24,24s24-10.745,24-24S37.255,0,24,0z M21,33.064c0,2.201-1.688,4-3.75,4
	s-3.75-1.799-3.75-4V14.934c0-2.199,1.688-4,3.75-4s3.75,1.801,3.75,4V33.064z M34.5,33.064c0,2.201-1.688,4-3.75,4
	s-3.75-1.799-3.75-4V14.934c0-2.199,1.688-4,3.75-4s3.75,1.801,3.75,4V33.064z" />
    <path id="play-button-shape" d="M24,0C10.745,0,0,10.745,0,24s10.745,24,24,24s24-10.745,24-24S37.255,0,24,0z M31.672,26.828l-9.344,9.344
	C20.771,37.729,19.5,37.2,19.5,35V13c0-2.2,1.271-2.729,2.828-1.172l9.344,9.344C33.229,22.729,33.229,25.271,31.672,26.828z" />
  </defs>
</svg>

<div class="buttons">
  <!-- if we needed to change height/width we could use viewBox here -->
  <svg class="button" id="play-button">
    <use xlink:href="#play-button-shape">
  </svg>
  <svg class="button" id="pause-button">
    <use xlink:href="#pause-button-shape">
  </svg>
</div>

3. Style the buttons and elements for visual appeal. Adjust dimensions, colors, and positioning as desired.

.button {
  width: 48px;
  height: 48px;
  cursor: pointer;
}
.button:hover {
  fill: white;
}

.defs {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

iframe {
  float: left;
  width: 300px;
  height: 200px;
}

.buttons {
  padding: 1rem;
  background: #f06d06;
  float: left;
}

body {
  padding: 1rem;
}

4. Finally, Add the YouTube Player API script to the page. Initialize the player object and link it to the video iframe. Create functions to control the video playback using custom buttons.

// https://developers.google.com/youtube/iframe_api_reference

// global variable for the player
var player;

// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
  // create the global player from the specific iframe (#video)
  player = new YT.Player("video", {
    events: {
      // call this function when player is ready to use
      onReady: onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  // bind events
  var playButton = document.getElementById("play-button");
  playButton.addEventListener("click", function () {
    player.playVideo();
  });

  var pauseButton = document.getElementById("pause-button");
  pauseButton.addEventListener("click", function () {
    player.pauseVideo();
  });
}

// Inject YouTube API script
var tag = document.createElement("script");
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

That’s all! hopefully, you have successfully created Custom Play/pause Button For Youtube Video. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.