how to embed Youtube videos in a Ionic 4 app

Question

I am trying to develop an ionic app that i will be deploying as a pwa in which i want to embed Youtube Videos and display them in a grid. Video links, their titles, and brief descriptions are provided by my Cloud Firestore objects.

Now the problem is that when I am trying to use iframe in ionic app with single url like :

<iframe width="560" height="315" src="https://www.youtube.com/embed/6kqe2ICmTxc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

then it is working but when I am binding it to my database Video URL, then it is not working. The console is showing that URL is not a safe url.

Now, I know that it can be fixed by using the DomSanitizer but i don't know how to use it for the array of objects that contains the required links.

Chaitanya Mankala · Accepted Answer · 2018-10-08T12:19:03.100

13

Try this,

    trustedVideoUrl: SafeResourceUrl;
    array_of_objects = [{vid_link:"https://youtube.com/lalla"},{vid_link:"https://youtube.com/lalla"}]


    constructor(public navCtrl: NavController,
                private domSanitizer: DomSanitizer) {}

    ionViewWillEnter(): void {
      for(let i of array_of_objects){
        i.trustedVideoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(i.vid_link);
      }
    }

and in your HTML,

 <iframe *ngFor="let i of array_of_objects" width="100%" height="315" [src]="i.trustedVideoUrl" frameborder="0" allowfullscreen></iframe>

There is one more thing we need to do in order to make this work on iOS, we need to allow navigation to YouTube urls in our config.xml file by adding the below line:

<allow-navigation href="https://*youtube.com/*"/>

edited Oct 08 '18 at 12:19

answered Oct 08 '18 at 12:12

Chaitanya Mankala

1,594
17
24

It worked but only when I am navigating from a previous view to this page. When I refresh this page it throws an error saying **can't read property length of undefined at** 'for(let video of this.videos)'. Thanks in advance. – pulkit aggarwal Oct 08 '18 at 13:51
1

that means this.videos is an empty array when you are running this loop. Make sure that the data is fetched and filled in this.videos, before you run that loop – Chaitanya Mankala Oct 09 '18 at 06:01
you have some bugs, for example `i.trustedVideoUrl` most be `this.trustedVideoUrl` be an array – Mansour Alnasser Mar 24 '21 at 17:17

score 0 · Answer 2 · answered Mar 24 '21 at 17:16

I will prefer to use freindly names and fix the bugs

    <iframe
      *ngFor="let trustedLink of trustedVideoUrlArray"
      width="100%"
      height="315"
      [src]="trustedLink"
      frameborder="0"
      allowfullscreen
    ></iframe>

import { Component, OnInit } from '@angular/core';
import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-help',
  templateUrl: './help.page.html',
  styleUrls: ['./help.page.scss'],
})
export class HelpPage implements OnInit {
  trustedVideoUrlArray: SafeResourceUrl[] = [];
  youtubeUrlsArray = [
    {
      link: "https://www.youtube.com/embed/ytLZo1RBS5U"
    },
    {
      link: "https://www.youtube.com/embed/ytLZo1RBS5U"
    }
  ]

  constructor(
    public navCtrl: NavController,
    private domSanitizer: DomSanitizer
  ) { }

  ngOnInit() {
    for (let item of this.youtubeUrlsArray) {
      this.trustedVideoUrlArray.push(this.domSanitizer.bypassSecurityTrustResourceUrl(item.link));
    }
  }

}

how to embed Youtube videos in a Ionic 4 app

2 Answers2