Ionic Cards for Media

http://santoshshinde2012.blogspot.ca/2015/04/play-youtube-video-in-ionic-framework.html

by phollott

HTML

<script src="//code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
<link rel="stylesheet" href="//code.ionicframework.com/1.0.0-beta.6/css/ionic.css">
<script src="//phollott.github.io/lib/rhizome/rhizome.js"></script>
<div ng-app="starter">
    <ion-view view-title="Video Gallery" ng-controller="youtubevideo">
        <ion-content>
            <div class="list card">
                <div class="item item-divider"> <i class="ion-videocamera"></i>
Video</div>
                <div class="padding">
                    <youtube width="100%" height="150" videoid="{{yt.videoid}}"></youtube>
                </div>
            </div>
        </ion-content>
    </ion-view>
</div>

JavaScript

angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives'])

     .run(function ($ionicPlatform) {
     $ionicPlatform.ready(function () {
         // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
         // for form inputs)
         if (window.cordova && window.cordova.plugins.Keyboard) {
             cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
         }
         if (window.StatusBar) {
             // org.apache.cordova.statusbar required
             StatusBar.styleDefault();
         }
     });
 })

     .config(function ($sceDelegateProvider) {
     $sceDelegateProvider.resourceUrlWhitelist(['self', new RegExp('^(http[s]?):\/\/(w{3}.)?youtube\.com/.+$')]);
 });

 angular.module('starter.directives', [])
     .directive('youtube', function ($window) {
     return {
         restrict: "E",

         scope: {
             height: "@",
             width: "@",
             videoid: "@"
         },

         template: '<div></div>',

         link: function (scope, element) {
             var tag = document.createElement('script');
             tag.src = "https://www.youtube.com/iframe_api";
             var firstScriptTag = document.getElementsByTagName('script')[0];
             firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

             var player;

             $window.onYouTubeIframeAPIReady = function () {

                 player = new YT.Player(element.children()[0], {
                     playerVars: {
                         autoplay: 0,
                         html5: 1,
                         theme: "light",
                         modesbranding: 0,
                         color: "white",
                         iv_load_policy: 3,
                         showinfo: 1,
                         controls: 1
                     },

                     height: scope.height,
                     width: scope.width,
                     videoId:...