How to search YouTube videos without API key in Ionic

How it works

Step 1
Create an ionic angular app or use an existing one. We will create a new one using the "tabs" template.

ionic start myApp tabs

Step 2
Install the following dependencies

ionic cordova plugin add cordova-plugin-advanced-http

npm install ionic-youtube-search --save

https://www.npmjs.com/package/ionic-youtube-search

Step 3
Open the app in your IDE

Step 4
Import the "ionic-youtube-search" dependency in your *.page.ts

import * as youtube from 'ionic-youtube-search';

Step 5
Create a method for fetching the youtube stream based on a video id. Then create a second method for playing the stream.

  videos = [];
  searchModel = '';
  
  async search() {
    this.videos = await youtube.search(this.searchModel);
  }

Step 6
Create a UI element e.g. a button, which list all the videos

   <ion-searchbar autocomplete="on" debounce="800" animated [(ngModel)]="searchModel" (ionClear)="videos = []" (ionChange)="search()"></ion-searchbar>

  <ion-list>
    <ion-list-header>
      Recent Conversations
    </ion-list-header>

    <ion-item *ngFor="let video of videos">
      <ion-avatar slot="start">
        <img [src]="video.snippet.thumbnails.high.url">
      </ion-avatar>
      <ion-label>
        <h2>{{video.snippet.title}}</h2>
        <h3>{{video.snippet.publishedAt}}</h3>
        <p>{{video.snippet.views.runs[0].text}}</p>
      </ion-label>
    </ion-item>
  </ion-list>

Step 7
Start the app in your emulator and test

ionic cordova emulate ios -l -c --target "YOUR SIMULATOR ID" -- --buildFlag="-UseModernBuildSystem=0"