How to display media (videos) from WP post in Ionic app?


#1

I am working in a mobile app where the users can visualize the posts from a specific WordPress account.

The issue I have so far, is that I can’t display the media, only the pictures but not the videos

this is the plugin I am using http://wp-api.org/ and here are the Docs for the media but still I am unable to display the videos along the whole content.

Here is a Plunker with what I have so far, In the 3rd post with the title Disfruta el video-set de Faceblind & Melissa O en Nocturnal #6 is a video attached that you can’t visualize due to the issue I am mentioning.

this is the html where you might see the title and the excerpt property of the post

<script id="tab-news.html" type="text/ng-template">
    <div ng-repeat="post in posts">
      <a ng-href="#/tabs/news/{{post.ID}}">
        <h2><span ng-bind-html="post.title"></span></h2>
        <p ng-bind-html="post.excerpt"></p>
        <p>{{:: post.date | date}}</p>
      </a>
    </div>
</script>

and here the one where you visualize the full content of the post

<script id="tab-post-detail.html" type="text/ng-template">
  <ion-view view-title="Noticia">

      <h3>{{:: post.title}}</h3>
      <p ng-bind-html="post.content"></p>

  </ion-view>
</script>

and here is the Angular part

.controller('NewsCtrl', function($scope,
                                 $ionicLoading,
                                 FreshlyPressed, $stateParams) {
  $scope.posts = [];
  $scope.doRefresh = function() {
    $scope.posts = FreshlyPressed.getBlogs($scope);
    $scope.$broadcast('scroll.refreshComplete');
  }
  $scope.doRefresh();
})

.service('FreshlyPressed', function($http) {
  return {
    getBlogs: function($scope) {
      $scope.postsURL = 'http://urbanetradio.com/wp-json/posts?_jsonp=JSON_CALLBACK';
      $http.jsonp($scope.postsURL).success(function(data, status, headers, config) {
        $scope.posts = data;
      });
    },
    getPostById: function(postId) {
      var url ='http://urbanetradio.com/wp-json/posts/'+ postId;
      return $http.get(url);
    }
  }
})

.controller('PostDetailCtrl', function($scope, $stateParams, FreshlyPressed) {
  var postId = $stateParams.postId;
      console.log( $stateParams)
 FreshlyPressed.getPostById(postId).success(function(response){
    $scope.post = response;
  })
});