嵌入式YouTube视频无法在Ionic3延迟加载的页面中使用

Question

我正在尝试将YouTube视频通过iframe API嵌入Ionic 3应用程序中的延迟加载页面上。

sample.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage } from 'ionic-angular';

@IonicPage({
  name: 'samplePage',
  segment: 'sample'
})

@Component({
  selector: 'page-sample',
  templateUrl: 'sample.html'
})
export class SamplePage {

  constructor(public navCtrl: NavController) {
  }
}

sample.module.ts

import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import { SamplePage } from './sample';

@NgModule({
    declarations: [
        SamplePage
    ],
    imports: [
        IonicPageModule.forChild(SamplePage)
    ],
    exports: [
        SamplePage
    ]
})
export class SamplePageModule {
}

sample.html

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoID" frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

我希望这个YouTube视频可以在所有浏览器中使用，但这是随机的。 该视频无法在Chrome浏览器上正常播放，但是当我打开开发人员模式或更改屏幕尺寸时，该视频即可正常播放。

仅当我使用@IonicPage()批注将其添加到延迟加载的页面时才会发生这种情况，但是当我删除此批注并正常使用该页面时，这种情况在任何地方都可以正常使用。