Error Cannot match any routes. ionic iOS embed video not showing

AIBug · November 22, 2020, 3:22am

I am trying to display a embedded video on my iOS app. The android app and the browser (chrome and safari and mobile) work fine. Only the iOS app doesn’t work.

It is not the security or permissions. I went to great lengths to check those out. Well at least I don’t think it is those.

I’m getting an error that says "Error: Cannot match any routes. URL Segment: ‘embed/iframe/…’ the error goes on from there. I’ll post it below lol. First I’ll show you my code…

HTML:

<iframe allowfullscreen *ngIf="sermon?.id === '1'" src="//fast.wistia.net/embed/iframe/nj4y9f0b7f?playerColor=3EC9A0&autoPlay=true&fullscreenButton=true&playButton=false&playsinline=false&preload=metadata&videoFoam=true&wmode=true&smallPlayButton=true"></iframe>

<iframe allowfullscreen *ngIf="sermon?.id === '2'" src="//fast.wistia.net/embed/iframe/xy2azhgzti?playerColor=3EC9A0&autoPlay=true&fullscreenButton=true&playButton=false&playsinline=false&preload=metadata&videoFoam=true&wmode=true&smallPlayButton=true"></iframe>

<iframe allowfullscreen *ngIf="sermon?.id === '3'" src="//fast.wistia.net/embed/iframe/svwxe6z9a1?playerColor=3EC9A0&autoPlay=true&fullscreenButton=true&playButton=false&playsinline=false&preload=metadata&videoFoam=true&wmode=true&smallPlayButton=true"></iframe>

<iframe allowfullscreen *ngIf="sermon?.id === '4'" src="//fast.wistia.net/embed/iframe/pbytxhvcpa?playerColor=3EC9A0&autoPlay=true&fullscreenButton=true&playButton=false&playsinline=false&preload=metadata&videoFoam=true&wmode=true&smallPlayButton=true"></iframe>

.ts file:

ionViewWillEnter() {
    this.dataProvider.load().subscribe((data: any) => {
      const sermonId = this.route.snapshot.paramMap.get('sermonId');
      if (data && data.sermons) {
        for (const sermon of data.sermons) {
          if (sermon && sermon.id === sermonId) {
            this.sermon = sermon;
            break;
          }
        }
      }
    });
  }

Error:

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'embed/iframe/nj4y9f0b7f' noMatchError@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:457759 ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:457498 error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:431408 _error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:66184 error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:65982 _error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:66184 error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:65982 _error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:66184 error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:65982 _error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:66184 error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:65982 _error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:66184 error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:65982 notifyError@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:510456 _error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:61140 error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:65982 _error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:66184 error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:65982 _error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:66184 error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:65982 error@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:431456 _complete@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:430529 complete@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:66047 _complete@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:66244 complete@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:66047 _complete@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:66244 complete@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:66047 _complete@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:60590 complete@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:66047 _complete@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:66244 complete@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:66047 ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:523900 _trySubscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234913 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234724 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234593 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234593 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234593 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234593 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234593 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234593 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234593 _innerSub@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:60450 _tryNext@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:60352 _next@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:60190 next@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:65923 ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:523883 _trySubscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234913 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234724 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234593 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234593 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234593 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234593 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234593 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234593 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234593 subscribe@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:234593 _innerSub@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:414962 _next@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:414799 next@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:65923 notifyNext@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:415333 _next@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:61053 next@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:65923 ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:330519 onInvoke@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:138867 run@ionic://fast.wistia.net/polyfills-es2015.dcbba0ed470a2bbfece2.js:1:1910 ionic://fast.wistia.net/polyfills-es2015.dcbba0ed470a2bbfece2.js:1:12683 onInvokeTask@ionic://fast.wistia.net/main-es2015.a003b1c06f6bc66c5881.js:1:138789 runTask@ionic://fast.wistia.net/polyfills-es2015.dcbba0ed470a2bbfece2.js:1:2529 _@ionic://fast.wistia.net/polyfills-es2015.dcbba0ed470a2bbfece2.js:1:8965 promiseReactionJob@[native code]

As far as I can tell, those are the only pieces of code that could be affecting it… but I could be wrong.

Thank you for your time, I appreciate you taking a look! Let me know if there is anymore info you need.

rapropos · November 22, 2020, 3:41am

Why aren’t you using a <video> element instead of an <iframe>?

AIBug · November 22, 2020, 3:15pm

Thank you so much for your reply! Good question, I used <iframe> because that’s what I read about for embedding videos in HTML.

Anyway, I switched it to <video>, and with <iframe> nothing showed up at all and I had errors, but now with <video> I get a black box with a ‘can’t play’ symbol like this:

and now, there are no errors at all which is a little weird right?

It works on android, safari, chrome, and mobile browsers…

Thanks again for the question!

Let me know if you think of anything else!

AIBug · November 22, 2020, 4:50pm

So, I never got the <video> tag to work…

but I did get it to work with <iframe> and fix the routing issue!

All I needed to do was add “https:” to my embedded URL like:

<iframe allowfullscreen *ngIf="sermon?.id === '1'" src="https://fast.wistia.net/embed/iframe/nj4y9f0b7f?playerColor=3EC9A0&autoPlay=true&fullscreenButton=true&playButton=false&playsinline=false&preload=metadata&videoFoam=true&wmode=true&smallPlayButton=true"></iframe>

Can you believe it was that easy? I couldn’t find an answer on google for like 2 months probably because it was an easy solution.

Thanks to everyone that took time to take a look!

Topic		Replies	Views
Iframe doesn't display on ios ionic-v3	0	495	January 18, 2019
Ionic4 ios iframe not loading the video Ionic Framework	3	5870	December 18, 2019
Iframe is not working in Ios ionic-v1	0	1780	June 22, 2016
iFrame iOS Error ionic-v3	2	1002	December 20, 2017
Youtube video unavailable on ios App Ionic Angular	2	1445	June 9, 2022

Error Cannot match any routes. ionic iOS embed video not showing

Related topics