Embedding youtube videos - IOS platform

ionic-v1
1

I used the ionic framework1.0.0 version.
I would like to add the iframe for playing the youtube inside the apps.
I found that there is no sound when i play the film in the IOS platform but it is workable in the Android platform.
I followed the below site for implementation.


Any one know how to solve this issue? Have any workable example?
Many thanks. ^^

2

Hey there!

So is anything loading on iOS?
Sounds like it could an issue of the url not being whitelisted on angular’s side

3

hi . thank you for your reply @mhartington .

there is no any extra apps running in the IOS.

When i play the youtube, the movie is running on IOS but there is no sound.

How can i solve this issue? Many Thanks.

4

Hmm, honestly I’m not 100% sure. I’ve never heard of this happening before.
Can you share a sample of your code?

5

@mhartington

sorry to reply you so late.

I tried two ways.

Method 1:

<iframe width="560" height="315" src="http://www.youtube.com/embed/Gym1QEsdHI0" frameborder="0" allowfullscreen></iframe>

–> can show the movie but no sound

Method 2:

< ion-view title="TestingApps">
	< ion-content ng-controller="HomeTabCtrl">
		< iframe src="http://www.youtube.com/embed/Gym1QEsdHI0" frameborder="0" width="560" height="315"></iframe>
	< /ion-content>
< /ion-view>

.controller('HomeTabCtrl', function($scope) {
	$scope.trustSrc = function(src) {
		return $sce.trustAsResourceUrl(src);
	}
	$scope.movie = {
		src : "http://www.youtube.com/embed/Gym1QEsdHI0",
		title : "Egghead.io AngularJS Binding"
	};
});

–> cannot display the movie

Kindly advise this issues.

Many Thanks ^^

6

Hmm, I used this and things worked fine for me

.config(function ($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist(['self', new RegExp('^(http[s]?):\/\/(w{3}.)?youtube\.com/.+$')]);
});

<ion-content>
   <iframe width="560" height="315" src="http://www.youtube.com/embed/ZjPRj2Vp74U" frameborder="0" allowfullscreen></iframe>
</ion-content>
2 Likes
7

@mhartington

Thanks a lot. it is workable. ^^

8

Used this solution but theres no video (balckscreen), only audio. On fullscreen de video shows up. Tested on Samsung S3 Cyanogenmod Ionic beta 14.

9

@mhartington This doesn’t seem to be working, I am using rc3… have you tried it with a more recent release of ionic? Testing in iOS, I get the video… but no audio.

EDIT
Even in v1.0.0-beta.14 I am unable to get sound in ios8

10

I can confirm that this does work, so their must be an issue somewhere in your code.

I have a small repo with an example if you need to check it out.

11

@mhartington I ran that, it once again it runs fine in the emulator… but on my ipad, ios8 I get no sound. What are you testing on?

12

@mhartington If I set “Use side switch to:” in my general settings of my ipad to “Lock Rotation”, the sound works.

So I had my hardware switch set so it was muted…

but it doesn’t seem like the sound should be off?


When you mute your iPad, you won’t hear these sounds:
Alerts
Notifications
Sound effects
Game audio

You’ll still hear sound from your media, such as these:
Music
Podcasts
Movies
Videos
TV shows

13

That makes sense. The audio will be treated as sound effects on iOS, so they will be muted. Not sure how much can be done here. You would either have to write a cordova plugin that could circumvent this.

14

When I call Ionic serve will videos be capable of playing or will I have to test it on a device?

15

The videos will be capable of playing.

16

I have a very similar problem:

device: iPhone 4s
iOS: 8.4.1

When i play a youtube video in an iframe i get 2 issues which do not occur on Android or in Chrome:

  1. video plays in its own video player outside of the app
  2. no audio
17

Well I have still problems with Youtube video s( IFRAME Embed … all URLs trusted…did all the rules I could find)
not playing at all on IOS ( 9.1.3) when I build an app ( with Xcode from Ionic IOs build) .
The videos do play fine on same devices, same app in the IONIC View app… as well as on ANdroid and in Browser .

I can replicate this in several apps

SO it seems a new bug with either new IOS , new Youtube , or angular or… IONIC .

Has anyone an idea how to fix ? As it runs fine in IONIC View there must be a way.

Also I have several apps using the same code … but older ionic and they still work fine
Thanks in advance for your help

18

However that is Angular1 solution, there is no such thing as sceDelegateProvider in ng2. So, for Angular 2 we do:

// Component
class Page1 {
    url: SafeResourceUrl;
    constructor(sanitizer: DomSanitizationService) {
        this.url = sanitizer.bypassSecurityTrustResourceUrl('https://youtube.com/embed/XHCVWWsQmUs');
    }
}

// Template
 <iframe height="190" onload="this.width=screen.width" [src]="url" frameborder="0" ></iframe>

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

Full solution on my Blog: http://meshfields.de/embed-youtube-videos-ionic2-angular2/

5 Likes
19

Well , just today I found the solution : Adding this line to config.xml does the trick and video now
play fine. This seems for the whitelist cordova plugin which seems
installed by default or so …

21

Hello mhartington. I tested the repo in my iPhone (IOs 9.3) and not working! Who i can solve this problem?

SORRY FOR MY ENGLISH!