Play Video

play.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class PlayService {
  isPlay = false;

  togglePlay(videoElement: HTMLVideoElement): void {
    this.isPlay = !this.isPlay;
    if (this.isPlay) {
      videoElement.play();
    } else {
      videoElement.pause();
    }
  }
}

component.ts

@ViewChild('videoPlayer', { static: false }) videoPlayer: ElementRef;

constructor(public playService: PlayService) {}

togglePlay(): void {
    this.playService.togglePlay(this.videoPlayer.nativeElement);
}

html

<div class="solutions-video-wrapper">
  <video #videoPlayer class="solutions-video" (click)="togglePlay()">
    <source src="../../../assets/video/solutions-video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
  </video>
  <i class="icon icon-play" [ngClass]="{ hide: playService.isPlay }"></i>
</div>

scss

&-video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    &-wrapper {
      position: relative;
      order: 1;
      max-height: 700px;
      @include media-breakpoint-up(md) {
        order: 2;
      }
      .icon.icon-play {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        margin: auto;
        width: 100px;
        height: 100px;
        z-index: 9;
        transition: 0.4s ease-in-out;
        &.hide {
          display: none;
        }
      }
    }
  }