

iframeタグの中に、YouTubeのビデオIDが設定されているangular式を指定して  
動画再生したいのですが、可能でしょうか。

現状、直接的にビデオIDを指定する方法が分からなかったので、  
仕方なくSelectBoxを使っております。  
（SelectBoxでビデオIDを選択すると、選択したIDの動画が再生出来るようになっています）  
※以下参照

これを、SelectBoxを使用せずに、直接動画を再生出来るようにすることは可能でしょうか。

色々調べて試行錯誤しましたが、うまくいきませんでした。  
ご教授頂けると大変助かります。宜しくお願い致します。

[code]

    <!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>
    
[/code]


CC BY-SA 3.0
2017-02-22T15:08:51.123
32877
2023-02-06T02:05:35.643
20708
question
javascript monaca onsen-ui angularjs html5
frameタグの中に、YouTubeのビデオIDが設定されているangular式を指定して動画再生したい


質問の意図を読み取れているか不安ですが、以下で期待されている挙動になりますか？

[code]

    <div>
      <iframe ng-src="{{youtubeUrl}}"> </iframe>
    </div>
    
[/code]

* * *
[code]

    app.controller('TestController',
    ['$scope', '$sce',
    function($scope, $sce) {
      var id = "YouTubeのビデオID"
      $scope.youtubeUrl = $sce.trustAsResourceUrl('https://www.youtube.com/embed/' + id);
    }])
    
[/code]


CC BY-SA 3.0
2017-02-23T02:20:20.173
32883
2017-02-23T02:20:20.173
20272
32877
answer