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