在Ionic 2中播放Youtube视频

Question

我想在离子2中显示YouTube视频。我正在使用这个YouTube原生插件。但是视频正在全屏播放。我希望它们调整大小并适合一些div 标签。所以有人帮我如何调整这个默认播放器的大小？

Answer 1

add api js

const doc = (<any>window).document;
let playerApiScript = doc.createElement('script');
playerApiScript.type = 'text/javascript';
playerApiScript.src = 'https://www.youtube.com/iframe_api';
doc.body.appendChild(playerApiScript);

然后只需对随机div进行常规的YouTube iframe API调用

即可

player = new (<any>window).YT.Player(divID, {});

Answer 2

在这里，您可以使用代码，根据所需的尺寸在iframe中播放YouTube上的视频。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FullvideoPage } from '../../pages/fullvideo/fullvideo';
import { VideoPlayer ,VideoOptions } from '@ionic-native/video-player';
import {SafeResourceUrl, DomSanitizer} from '@angular/platform-browser';
/**
 * Generated class for the ChaptersPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-chapters',
  templateUrl: 'chapters.html',
  providers:[VideoPlayer]
})
export class ChaptersPage {
videoOpts : VideoOptions ;
videoUrl: SafeResourceUrl;
  constructor(private domSanitizer: DomSanitizer, public navCtrl: NavController, public navParams: NavParams, private videoPlayer : VideoPlayer) {
  
  this.videoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/aw5pMBeOWM0');
  }
  }

<iframe width="100%" height="300" style="margin-left:-5% margin-right:-5%;" [src]="videoUrl" frameborder="0" allowfullscreen></iframe>