My template is set up to load details via a JSON file, including a video embed. While everything from the JSON files is working perfectly, I'm encountering an issue where the same video appears on every item. Is there a way to assign individual videos to each JSON file?
Below is the template for reference:
<div class="container" ng-repeat="guide in guides">
<div class="row">
<div class="col-md-12">
<br/>
<p><a ng-href="#/"><span class="glyphicon glyphicon-home"></span> Back to Guide List</a></p>
<h1><span class="glyphicon glyphicon-play-circle"></span> Watch {{ guide.title }}</h1>
<span>{{ guide.info }}</span><br/><br/>
</div>
<div class="col-md-12">
<video video="marvel">
</video><!--This is the bit I'm having an issue with -->
</div>
<div class="col-md-6">
<h3><span class="glyphicon glyphicon-education"></span> Background to {{ guide.title }}</h3>
<span>{{ guide.background }}</span><br/><br/>
</div>
<div class="col-md-6">
<h3><span class="glyphicon glyphicon-save"></span> Downloads for {{ guide.title }}</h3><br/>
<a ng-href="{{ guide.pdf }}" target="_blank"><span class="glyphicon glyphicon-floppy-save"></span> Download Help Guide PDF</a><br/><br/>
<a ng-href="{{ guide.video }}" target="_blank"><span class="glyphicon glyphicon-floppy-save"></span> Download Video</a>
</div>
</div>
</div>
I'm facing issues binding data into the video tag (which is a directive I've created) - so I'm seeking suggestions or solutions.
Any help would be greatly appreciated.