How can I embed youtube Link from JSON file

I have JSON file like

[{"id":"38", "youtube":"https://www.youtube.com/watch?v=PEnuHN-Mqvg"}]

I have ever try on php JavaScript 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?

First of all, I would recommend using a regex to get the video ID from a youtube URL. str.split("?v="); will not work in all the cases because a valid youtube video URL can have any of the following forms:

Second, You would need to construct the html markup for iframe(code to embed) with a valid src and bind the resultant string with view. Simple interpolation like {{<iframe src="..">}} will not work. So use ng-bind-html

<div ng-bind-html="<iframe src='...'>"></div>

Finally you would require $sce service to make AngularJS binding to result in a value that is marked as safe to use for that context.

<div ng-bind-html="getTrustedHTML('<iframe src=...>')"></div>

Where getTrustedHTML() is a function returning trusted HTML for angular's context.

  $scope.getTrustedHTML=function(str){
       return $sce.trustAsHtml(str);
  }

Here's what your controller should look like:

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>

Working Plunkr

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 id youtube then (go through this link fo it https://docs.angularjs.org/api/ng/directive/ngBindHtml) 

<div id="youtube" ng-bind-html = "url"></div>