How can I embed YouTube link from JSON file
I have a JSON file like
[{"id":"38", "youtube":"https://www.youtube.com/watch?v=PEnuHN-Mqvg"}]
I've ever tried a PHP script like
var str = data[i].youtube;
var res = str.split("?v=");
//raplace & is ?
var str2 = res[1];
var res2 = str2.replace("&", "?");
//asign iframe to url variable
var url = "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/"+res2+"\" frameborder=\"0\" allowfullscreen></iframe>";
$("#youtube").append(url); //show tag iframe
So how can I apply in AngularJS?
source to share
First of all, I would recommend using a regular expression to get the video id from the youtube url. str.split("?v=");
will not work in all cases because a valid YouTube video URL can be any of the following forms:
- http://www.youtube.com/watch?v=iwGFalTRHDA
- http://www.youtube.com/watch?v=iwGFalTRHDA&feature=related
- http://youtu.be/iwGFalTRHDA
- http://youtu.be/n17B_uFF4cA
- http://www.youtube.com/embed/watch?feature=player_embedded&v=r5nB9u4jjy4
- http://www.youtube.com/watch?v=t-ZRX8984sc
- http://youtu.be/t-ZRX8984sc
Second, you will need to build the html markup for the iframe (embed code) with a valid src and bind on the resulting view string. Simple interpolation, for example {{<iframe src="..">}}
, won't work. So use ng-bind-html
<div ng-bind-html="<iframe src='...'>"></div>
Finally, you will need a service $sce
for the AngularJS binding to cast to a value that is marked safe for use in this context.
<div ng-bind-html="getTrustedHTML('<iframe src=...>')"></div>
Where getTrustedHTML()
is the function returning trusted HTML for the angular context.
$scope.getTrustedHTML=function(str){
return $sce.trustAsHtml(str);
}
Your controller should look like this:
app.controller('MainCtrl', function($scope,$sce, yourService) {
$scope.name = 'World';
$scope.data = {};
//If you want to get the video links from a JSON
yourService.getData().then(function(res){
$scope.data = res.data;
})
$scope.postContent = ''
/* or directly use $scope.postContent = <youtube URL>
*/
$scope.parseVideoURL = function(text) {
var re = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\S*[^\w\s-])([\w-]{11})(?=[^\w-]|$)(?![?=&+%\w.-]*(?:['"][^<>]*>|<\/a>))[?=&+%\w.-]*/ig;
return text.replace(re,
'<iframe height="100%" width="100%" src="http://www.youtube.com/embed/$1" allowfullscreen></iframe>');
}
$scope.publishVideo = function(vid){
return $scope.parseVideoURL(vid)
}
$scope.getTrustedHTML=function(str){
return $sce.trustAsHtml(str);
}
});
and here's the markup
Enter a Youtube URL. Eg: 'https://www.youtube.com/watch?v=PEnuHN-Mqvg'
<br><br><br>
<input type='text' ng-model="postContent" >
<div ng-bind-html="getTrustedHTML(publishVideo(postContent))"></div>
<h3>VIDEOS FROM JSON</h3>
<div ng-repeat="v in data" ng-bind-html="getTrustedHTML(publishVideo(v.youtube))"></div>
Plunkr work
source to share
var myApp = angular.module('myApp', []);
myApp.controller('yourController', function ($scope, testService) {
$scope.data = {};
testService.getData().then(data) {
$scope.data = data;
//loop through data I have direcctly passed 1 array element for eg
var str = data[0].youtube;
var res = str.split("?v=");
//raplace & is ?
var str2 = res[1];
var res2 = str2.replace("&", "?");
//asign iframe to url variable
$scope.url = "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/"+res2+"\" frameborder=\"0\" allowfullscreen></iframe>";//please use
});
});
myApp.service('yourService', function ($http) {
this.getData = function () {
return $http.get('data.json');
}
});
on your html if your div has a youtube id (follow this link for https://docs.angularjs.org/api/ng/directive/ngBindHtml )
<div id="youtube" ng-bind-html = "url"></div>
source to share