Video not playing from typescript in owl carosal

I have updated my previous question. I am trying to play a video in Owl Carousal using on button click but it's not working properly. Some of the videos are playing but most of the time it's not. Without carousal normally for a single video, it's working fine, is any CSS related to owl carousal creating an issue? I am getting proper video elements in the console too. The video seems to be playing and can hear the video sound it's not playing video seems to video screen stuck

Here is my HTML :

I am trying to create a play button by clicking with the function playVideo()

 <div class="big_img mediaCursor" *ngIf="post.mediaData && post.mediaData.length > 1 && post.post_type == 'is_post'" >
        <owl-carousel-o [options]="customOptions1"  #owlCarousel (change)="handleSlide($event)">
          <ng-container *ngFor="let img of post.mediaData"  >
            <ng-template class="slide"  carouselSlide>
              <button  *ngIf="img.media_type === 'video'" class="btn-play-video" id="video_play_" (click)="playVideo(img.id)">
                <i class="ti ti-control-play"></i>Play
              </button>
              <div class="mb-0 testtts" id="parentVideo_" >
                <img *ngIf="img.media_type === 'image'" (click)="Openpost(post.post_id)" [src]="img.file_path" alt="Icelandic"
                  class="big_img img-fluid cursor"  />
                  <video id="video_" width="640"  controls preload="none"    poster=""
                    *ngIf="img.media_type === 'video'" class="video-js vjs-default-skin cursor"
                    >
                    <source src="#t=1" type="video/mp4" />
                  </video>
              </div>
            </ng-template>
          </ng-container>
        </owl-carousel-o>
      </div>

Here is my TS for the function playVideo() :

  playVideo(eleId){
   let button:HTMLButtonElement = document.querySelector('#video_play_' + eleId)
   let video:HTMLVideoElement =  document.querySelector('#video_' + eleId)
   let parentDiv:HTMLDivElement = document.querySelector('#parentVideo_' + eleId)
   let ddVHeight = parentDiv.offsetHeight
   video.load();
  video.onloadeddata = (event) => {
    video.play()
   this.renderer.setStyle(parentDiv, "height", `${ddVHeight}px`);
    this.renderer.listen(video, 'playing', () => {
     this.renderer.addClass(button, 'hide');
   })
   this.renderer.listen(video, 'pause', () => {
     this.renderer.removeClass(button, 'hide');
   })
    
};

  }

Any suggestion or hint will be appreciated. Thanks.

from Video not playing from typescript in owl carosal