I am creating a Angular application which has a YouTube Player Component. The application should have a mobile and a desktop design.
youtube-component.html:
<div id="content"><div id="player"></div></div>youtube-component.ts:
export class YoutubeComponent implements OnInit { player: YT.Player = null as any; reframed: Boolean = false; @Input() get videoId(): string | undefined { return this.videoId$.value; } set videoId(videoId: string | undefined) { this.videoId$.next(videoId || undefined as any); } private readonly videoId$ = new BehaviorSubject<string>(""); @Output() stateChange = new EventEmitter<YT.PlayerState>(); constructor(private ngZone: NgZone) { super(); } ngOnInit(): void { // This code loads the IFrame Player API code asynchronously, according to the instructions at const tag = document.createElement('script'); tag.src = 'https://www.youtube.com/iframe_api'; document.body.appendChild(tag); this.videoId$ .subscribe(res => { if (!!res) { this.startVideo(); } }) } initYoutubePlayer() { // Return if Player is already created let tag = document.createElement('script'); tag.id = "player-script"; tag.src = 'https://www.youtube.com/iframe_api'; let firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode!.insertBefore(tag, firstScriptTag); } startVideo() { this.reframed = false; this.player = new window['YT'].Player('player', { videoId: this.videoId, playerVars: { color: "white", showinfo: 0, playsinline: 1, loop: 0 }, events: {'onStateChange': (event) => this.ngZone.run(() => this.stateChange.emit(event.data)) } }); }}Playing videos on desktop size works perfectly fine, however, when I reduce the screen width below 600 px, the YouTube player just disappears, although the HTML element is still visible in the developer console.