Custom play button

Bootstrap 5 Custom play button component

Responsive Custom play button built with Bootstrap 5. Add custom play button to customize iframes on your site.

Basic example

To make a custom play button you need:

Video in <iframe> element
image in <button> element
image cover(placeholder image that covers the video but is under the button)

Add CSS that styles and positions these elements and JavaScript code that, after pressing the button, makes the video player appear, start the video, and hides the custom button and image cover.

Show code Edit in sandbox

<div class="m-5">
  <div class="wrapper">
   <img  id="video-cover" src="https://i.ytimg.com/vi/d7lCZ0rpH3o/maxresdefault.jpg" alt="Video title">
   <iframe
    id="video"
    width="560" height="315"
    src="https://www.youtube.com/embed/d7lCZ0rpH3o"
    frameborder="0"
    allow="autoplay; encrypted-media"
    allowfullscreen>
  </iframe>
   <button data-mdb-button-init id="playbutton" class="play-btn">
    <svg enable-background="new 0 0 141.73 141.73"
    height="141.73px"
    id="Warstwa_1"
    version="1.1"
    viewBox="0 0 141.73 141.73"
    width="141.73px"
    xml:space="preserve"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
      <g>
        <path d="M101.628,40.092c-8.22-8.22-19.149-12.746-30.774-12.746c-11.624,0-22.553,4.526-30.772,12.746
        c-16.968,16.969-16.967,44.578,0.001,61.546c8.22,8.22,19.149,12.747,30.773,12.747s22.553-4.526,30.772-12.746
        s12.747-19.148,12.747-30.773S109.848,48.312,101.628,40.092z M100.214,100.225c-7.842,7.842-18.269,12.16-29.358,12.16
        s-21.517-4.319-29.359-12.161c-16.188-16.188-16.188-42.529-0.001-58.718c7.842-7.842,18.269-12.16,29.358-12.16
        c11.091,0,21.518,4.318,29.36,12.16c7.842,7.843,12.161,18.269,12.161,29.359S108.056,92.382,100.214,100.225z"
        fill="#ffffff"/>
        <path d="M65.893,55.983c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l13.466,13.466L64.478,84.331
        c-0.391,0.391-0.391,1.023,0,1.414c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293L80.065,71.57
        c0.391-0.391,0.391-1.023,0-1.414L65.893,55.983z"
        fill="#ffffff"/>
      </g>
    </svg>
   </button>
  </div>
</div>

.wrapper {
  position:relative;
  width:560px;
}

.wrapper img {
  max-width:100%;
  height:auto;
}

.wrapper iframe {
  display:none;
}

.play-btn {
  position:absolute;
  z-index:666;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background-color:transparent;
  border:0;
}

.play-btn:hover {
  cursor:pointer;
}

.play-btn:focus {
  outline:0;
}

const Player = document.getElementById('video');
const PlayBtn = document.getElementById('playbutton');
const videoCover = document.getElementById('video-cover');

let times = 0;
PlayBtn.addEventListener('click', () => {
    if (times === 0) {
        let currentSrc = Player.src;
        let newSrc = currentSrc.includes('?') ? `${currentSrc}&autoplay=1` : `${currentSrc}?autoplay=1`;
        Player.src = newSrc;
        times = 1;
        Player.style.display = 'block';
        PlayBtn.style.display = 'none';
        videoCover.style.display = 'none';
    }
});

Custom play button

Bootstrap 5 Custom play button component

Basic example

Related resources