Error in Youtube Video Player: ERROR TypeError: Object(...) is not a function

Im using Ionic Video Player to watch Youtube channel videos on my application. The list of videos works fine but when i try to play it the emulator show me this error on this line:

<button ion-button icon-left clear small (click)=“playVideo($event, post)”>

TypeError: Object(...) is not a function
    at YoutubeVideoPlayer.openVideo (http://localhost:8100/build/vendor.js:84199:141)
    at YoutubePage.webpackJsonp.469.YoutubePage.playVideo (http://localhost:8100/build/4.js:131:22)
    at Object.eval [as handleEvent] (ng:///YoutubePageModule/YoutubePage.ngfactory.js:27:27)
    at handleEvent (http://localhost:8100/build/vendor.js:13607:172)
    at callWithDebugContext (http://localhost:8100/build/vendor.js:15092:42)
    at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/vendor.js:14679:12)
    at dispatchEvent (http://localhost:8100/build/vendor.js:10056:25)
    at http://localhost:8100/build/vendor.js:10670:38
    at HTMLButtonElement.<anonymous> (http://localhost:8100/build/vendor.js:36952:53)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)


  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
  <div *ngFor= "let post of posts">
      <img src="{{ post.snippet.thumbnails.high.url }}">
          <h4>{{ post.snippet.title }}</h4>
        <button ion-button icon-left clear small (click)="playVideo($event, post)">
          <ion-icon name="play">
            <div>Play Video</div>  
    <!--  display error -->
    <div style="width:100%; height:100%; margin-top:50%;" *ngIf="no_result">
      <h1>Error recuperando videos</h1>


import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player/ngx';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

  selector: 'page-youtube',
  templateUrl: 'youtube.html',
export class YoutubePage {

  // youtube channel Id
  channelID: string = 'UC7Nfr13PyP84jWgU5FS9LGg';

  //maximum number of video the search will return
  maxResults: string = '5';

  //incase if you want to use pagination
  pageToken: string;

  // youtube api key
  googleToken: string = 'AIzaSyCa_RLmwvsOYU-ql0K2jAHCEXMtlWOA90A';

  //the term we will use for the search
  //searchQuery: string = 'Pst. David Olusegun';

  //array that will contain the videos after they have been retrieved
  posts: any = [];

  // boolean to hide/show the error message
  no_result: boolean = false;

  loader: any;

  constructor(public loading: LoadingController, public http: Http, private youtube: YoutubeVideoPlayer, public navCtrl: NavController, public navParams: NavParams) {  

    // creates a loader
    this.loader = this.loading.create({
      // the content of the loader during its operations is specified here
      content: 'Cargando videos'

    // makes loader visible
    this.loader.present().then(() => {

  fetchData() {

    //api to retrieve videos
    let url = '' +
    this.channelID + '&type=video&order=date&maxResults=' +
    this.maxResults + '&key=' + this.googleToken;

    // if you are interesting on pagination
    if (this.pageToken) {
        url +=  '&pageToken=' + this.pageToken;

    this.http.get(url).map(res => res.json()).subscribe(data => {
    // populate post array  with the response
    this.posts = this.posts.concat(data.items);

      // if error ocurs
    (error => {
      // show the error message
      this.no_result= true;

      //dismiss the loader

    // if sucessfully
    () => {


  playVideo (e, post){




Any ideas how to solve it?

Any success with fixing this?