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.

Video title
<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';
    }
});

Hello,

I will do my best to help you with anything related to:
📃 licensing
💵 pricing
🛒 questions about purchase process
❓ general questions about MDB features, integrations, design system etc.

If you have a technical question ⚙️ regarding the UI Kit code itself - use the technical chat instead.
You can easily switch between the General/Technical chats via the tabs above.

Hello,

I will do my best to help you with anything related to:
⚙️ technical questions regarding the UI kit
🔑 API options, names & methods
🐛 solving bugs
📝 code examples

Make sure to choose the correct technology of your UI kit before we start!

If you have a general question ❓regarding the licensing or purchases - use the general chat instead.
You can easily switch between the General/Technical chats via the tabs above.
AI Chat