You Tube Video Carousel - Copy this Angular, Css Component to your project

import { Component, Input, OnInit } from '@angular/core'; import { IResource } from '../../models/resource.models'; import { CommonModule } from '@angular/common'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; @Component({ selector: 'eino-resource-preview-link', standalone: true, templateUrl: './resource-preview-link.component.html', styleUrls: ['./resource-preview-link.component.scss'], imports: [CommonModule], }) export class ResourcePreviewLinkComponent implements OnInit { @Input({ required: true }) resource!: IResource; sanitizedVideoUrl!: SafeResourceUrl; isVideoPlaying: boolean = true; isYouTube: boolean = false; isVimeo: boolean = false; constructor(private sanitizer: DomSanitizer) {} ngOnInit() { if (this.resource.link_url) { this.isYouTube = this.isYouTubeLink(this.resource.link_url); this.isVimeo = this.isVimeoLink(this.resource.link_url); if (this.isYouTube || this.isVimeo) { this.sanitizedVideoUrl = this.getSanitizedUrl(this.resource.link_url); } } } isYouTubeLink(url: string): boolean { const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+$/; return youtubeRegex.test(url); } isVimeoLink(url: string): boolean { const vimeoRegex = /^(https?:\/\/)?(www\.)?(vimeo\.com|player\.vimeo\.com\/video)\/\d+(\?.*)?$/; return vimeoRegex.test(url); } getSanitizedUrl(url: string): SafeResourceUrl { if (this.isYouTube) { const videoId = this.extractVideoIdFromYouTube(url); const safeUrl = `https://www.youtube.com/embed/${videoId}`; return this.sanitizer.bypassSecurityTrustResourceUrl(safeUrl); } else if (this.isVimeo) { const videoId = this.extractVideoIdFromVimeo(url); const safeUrl = `https://player.vimeo.com/video/${videoId}`; return this.sanitizer.bypassSecurityTrustResourceUrl(safeUrl); } return ''; } extractVideoIdFromYouTube(url: string): string { let videoId = ''; if (url.includes('youtube.com')) { const urlParams = new URLSearchParams(url.split('?')[1]); videoId = urlParams.get('v') || ''; } else if (url.includes('youtu.be')) { const pathParts = url.split('/'); videoId = pathParts[pathParts.length - 1].split('?')[0]; } return videoId; } extractVideoIdFromVimeo(url: string): string { const pathParts = url.split('/'); return pathParts[pathParts.length - 1].split('?')[0]; } } <ng-container> @if (isYouTube || isVimeo) { <iframe [src]="sanitizedVideoUrl" width="560" height="300" class="video-iframe" frameborder="0" allow="encrypted-media" allowfullscreen> </iframe> <div class="info-wrapper1" [class.new-resource]="!resource.resource_info"> <h3 class="title">{{ resource.title }}</h3> <span class="source"> <i class="ri-external-link-line"></i> {{ resource.link_url }} </span> </div> } @else { <a [href]="resource.link_url" class="link" target="_blank" rel="noopener noreferrer"> <img [ngClass]="{ 'no-preview': !resource.preview_image }" [src]=" resource.preview_image || '/assets/images/resource/no-preview.gif' " [alt]="resource.link_url" /> <div class="info-wrapper" [class.new-resource]="!resource.resource_info"> <h3 class="title">{{ resource.title }}</h3> <span class="source"> <i class="ri-external-link-line"></i> {{ resource.link_url }} </span> </div> </a> } </ng-container> thsi is my html and ts , please modify in this according to requierment