Angular iframe embedded video exits fullscreen immediately due to component reload

I'm working on an Angular application where I display embedded videos using . The videos are part of a list of topics, and each video is shown when a topic is expanded (using *ngIf). Here's the issue:

Problem: When I click the fullscreen button on the video player (YouTube, for example), the video exits fullscreen immediately or never enters it. It seems like the Angular component reloads or destroys and re-renders the DOM element, causing the fullscreen to close.


<div class="course-container mt-3" *ngIf="topics.length > 0"> <div
*ngFor="let topic of topics; let i = index" class="topic-section">
<div id="accordion-{{topic.tid}}" class="row">
<div class="card my-4">
<div class="topic-card d-flex justify-content-between align-items-center">
<div class="topic-header row"
[ngClass]="{ 'disabled-topic': topic.isPaid === 2 && topic.paymentStatus === 0 }">
<div class="col-md-10">
<span class="topic-title">Topic {{ i + 1 }} : {{ topic.tname }}</span>
</div>
<div class="col-md-1 d-flex">
<span class="toggle-icon-container col-md-6 d-flex"
(click)="toggleVideo(topic.tid, topic.isPaid, topic.paymentStatus)"
[ngClass]="{ rotate: expandedTopicId === topic.tid }">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" fill="#dd9fff" />
<path d="M8 10l4 4 4-4" stroke="black" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</span>
</div>

</div>
<div class="col-md-2 d-flex justify-content-center align-items-center">
<span class="paidStatusLabel" [ngClass]="{
freePlan: topic.isPaid === 1,
paidPlanAvailable: topic.isPaid === 2 && topic.paymentStatus === 1,
paidPlanEnquire: topic.isPaid === 2 && topic.paymentStatus === 0
}">
<ng-container *ngIf="topic.isPaid === 2 && topic.paymentStatus === 0; else normalBadge">
<!-- If Paid but needs Enquiry, show button -->
<button class="badge badge-warning border-0" (click)="enquire(topic)">
Paid – Click Here to Enquire
</button>
</ng-container>
<ng-template #normalBadge>
<!-- Otherwise, show simple badge -->
<span class="badge" [ngClass]="{
'badge-light': topic.isPaid === 1,
'badge-success': topic.isPaid === 2 && topic.paymentStatus === 1,
}">
{{
topic.isPaid === 1
? 'Free'
: 'Paid and Available'
}}

</span>
</ng-template>
</span>
</div>
</div>

<!-- Videos Section -->
<div class="videos-container" *ngIf="expandedTopicId === topic.tid">
<ul class="list-group" style="padding-top: 2rem;padding-bottom: 2rem;">
<li class="list-group-item" *ngFor="let video of topicVideos[topic.tid]">
<div *ngIf="video.englishUrl" class="text-center">
<iframe [src]="sanitizeUrl(video.englishUrl)"
width="40%" height="300" frameborder="0"
allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>

<a [href]="video.englishUrl" target="_blank" rel="noopener">
<i class="bi bi-arrows-fullscreen ml-2" title="Open Fullscreen in New Tab"></i>
</a>

</div>
</li>
</ul>

<!-- Topic Rating Section -->
<div class="rating-container my-3 text-center">
<p>Rate this Topic</p>
<div>
<div class="my-2" style="padding: 1.25rem;">
<div *ngIf="selectedRatings[topic.topicId] !== undefined">
<div *ngIf="emojiKey" [@slideUp]>
<span style="font-size: 4rem;">
{{ getEmoji(selectedRatings[topic.topicId]) }}
</span>
</div>
</div>
</div>
<span *ngFor="let star of [].constructor(starCount); let starIndex = index"
(click)="rateVideo(topic.topicId, starIndex + 1)"
style="cursor: pointer; font-size: 3rem; color: gold;">
{{ showIcon(starIndex, topic.topicId) === 'star' ? '★' : '☆' }}
</span>
</div>
</div>

</div>

<div *ngIf="topics.length === 0 && selectedCourseId">
<p>No topics available for this course.</p>
</div>
</div>
</div> </div> </div>

> ```




constructor(
private axiosService: AxiosService,
private toastr: ToastrService,
private sanitizer: DomSanitizer
) { }

ngOnInit(): void {
this.axiosService.userId$.subscribe((id) => {
this.userId = id ? Number(id) : null;
// this.fetchLastChoice();
});

this.getLastViewChoice();


// for (let index = 0; index < this.starCount; index++) {
// this.ratingArr.push(index);
// }
}

sanitizeUrl(url: string): SafeResourceUrl {
const trustedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
console.log('Sanitized URL:', trustedUrl);
return trustedUrl;
}

Continue reading...