Ng-if with includes method in template node?

Dashboard
1

Hello everyone,

I have an array of objects that have URL properties, with values that contain giphy.com or youtube.com

I'm trying to present them as either an Image or a Embedded Video depending on their src.
What am I doing wrong here?

  <div class="chime-img-wrap">
     <img ng-if="obj.link.includes(giphy)" src="{{obj.link}}" alt="" class="chime-img" >
     <iframe ng-if="obj.link.includes(youtube)"  src="{{obj.link}}" class="chime-vid" width="320" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
2

I think i was encountering a cors issue when trying to dynamical construct an embedded youtube video because I couldn't ever get the thing to load even though i'm sure I had the html and properties and values correct.
I opted to just handle .mp3, .mp4, .png, & .gif media urls instead.
I used my .includes() method in a prior function node on the appropriate properties then passed them along to my template node that looked like (note this next code segment is inside a ng-repeating div)

  <div class="chime-img-wrap" ng-if="obj.isgif === true">
     <img src="{{obj.link}}" alt="" class="chime-img" >
  </div>
  
  <div class="chime-img-wrap" ng-if="obj.ispng === true">
     <img src="{{obj.link}}" alt="" class="chime-img" >
  </div>
  
  <div class="chime-img-wrap" ng-if="obj.ismp4 === true">
    <video width="320" height="240" controls>
     <source src="{{obj.link}}" type="video/mp4">
    </video>
  </div>
  
  <div class="chime-img-wrap" ng-if="obj.ismp3 === true">
    <audio controls>
     <source src="{{obj.link}}" type="audio/mp3">
    </audio>
  </div>