I am trying to show video in iframe its working fine on ionic lab but in device its not showing the frame. I have tried many directives and solutions but nothing worked for me.
Solution 1
<iframe width="560" height="315" src="http://www.youtube.com/embed/ZjPRj2Vp74U" frameborder="0" allowfullscreen></iframe>
`app…config(function ($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([‘self’, new RegExp(’^(http[s]?)://(w{3}.)?youtube.com/.+$’)]);
});
There is no error in console and nothing show on iframe place.`
I also tried with another solution.
Solution 2
<embed-video iframe-id="{{featuredVideo.PostMediaId}}" ng-href="{{featuredVideo.Url}}" class="ng-isolate-scope" controls=0> <a href="{{featuredVideo.Url}}">Watch</a> </embed-video>
Directive
app.directive(‘embedVideo’, [ ‘$filter’ , ‘RegisteredPlayers’, ‘$sce’, ‘$window’, function ($filter, RegisteredPlayers, $sce, $window) {
‘use strict’;
return {
restrict: “E”,
template: ‘<iframe data-ng-attr-id="{{id}} “width=”{{width}}" height="{{height}}" data-ng-src=" {{trustedVideoSrc}}" allowfullscreen frameborder=“0”>’,
scope: {
height: ‘@’,
width: ‘@’,
onChange: ‘&’
},
link: function ($scope, $element, $attrs) {
var currentHref = undefined;
$attrs.$observe('width', function(w) {
$scope.width = w;
});
$attrs.$observe('height', function(h) {
$scope.height = h;
});
$attrs.$observe('iframeId', function(id) {
$scope.id = id;
});
//handle the use of both ng-href and href
$attrs.$observe('href', function(url) {
if (url === undefined || url === currentHref) {
return;
}
currentHref = url;
var player = null;
log(url)
log(RegisteredPlayers)
//search for the right player in the list of registered players
angular.forEach(RegisteredPlayers, function (value) {
if (value.isPlayerFromURL(url)) {
player = value;
}
});
if (player === null) {
//haven't found a match for a valid registered player
$scope.onChange();
return;
}
var parameters = url.match(player.playerRegExp);
var videoID = parameters[2],
protocol = parameters[1],
time = url.match(player.timeRegExp),
config = player.config;
//overwrite playback options
angular.forEach($filter('whitelist')($attrs, player.whitelist), function (value, key) {
var normalizedKey = player.transformAttrMap[key] != undefined ? player.transformAttrMap[key] : key;
player.settings[normalizedKey] = value;
});
player.settings.start = 0;
if (time) {
switch (player.type) {
case "youtube":
player.settings.start += (parseInt(time[2] || "0") * 60 * 60 );
player.settings.start += (parseInt(time[4] || "0") * 60 );
player.settings.start += (parseInt(time[6] || "0"));
break;
case "dailymotion":
player.settings.start += (parseInt(time[1] || "0"));
break;
default:
break;
}
}
//check if there is a need to add additional resources to the page...
if(player.isAdditionaResRequired()) {
var body = angular.element($window.document.querySelector('body'));
for(var r = 0; r < player.additionalRes.length; r++) {
var res = player.additionalRes[r];
if($window.document.querySelector('#'+res.id) == null) {
body.append(res.element);
}
}
}
// Call callback
$scope.onChange({videoId: videoID, provider: player.type});
//build and trust the video URL
var untrustedVideoSrc = player.buildSrcURL(protocol, videoID);
$scope.trustedVideoSrc = $sce.trustAsResourceUrl(untrustedVideoSrc);
});
}
}
}]);`