Youtube動画の表示・埋め込み方法

AngularJSではデフォルトだとYouTubeの動画を埋め込んでも表示されません。表示するにはYouTubeの埋め込み用URLをホワイトリストに登録する必要があります。

ホワイトリストの設定

var myApp = angular.module('myApp', []);

myApp.config(function ($sceDelegateProvider) {
    // 動画URLのホワイトリスト登録
    $sceDelegateProvider.resourceUrlWhitelist([
        // オリジナル
        'self',
        // YouTube
        'http://www.youtube.com/embed/**'
    ]);
});

9行目がYouTube動画の設定。

ちなみにブラックリストの設定は下記のとおり。

$sceDelegateProvider.resourceUrlBlacklist([
    // YouTube
    'http://www.youtube.com/embed/**'
]);