Untitled

<!DOCTYPE HTML>
<html nd-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">

    <script>
        var app = ons.bootstrap("myApp", [])
          .config(function ($sceDelegateProvider) {
            $sceDelegateProvider.resourceUrlWhitelist([
              'self',
              '"https://www.youtube.com/embed/**'
            ]);
          });

        app.controller('TestController', function($scope, $sce) {
            $scope.trustSrc = function(src) {
                return $sce.trustAsResourceUrl('https://www.youtube.com/embed/' + src);
            };
        })
    </script>

</head>

<body ng-controller="TestController">

    <div>
        <iframe ng-src="{{trustSrc(url)}}"> </iframe>
    </div>

    <div>
        <select ng-model="url">
          <option>{{■YouTubeのビデオID■}}</option>
        </select>
    </div>

</body>

</html>