I am encountering an issue with dynamically embedding a YouTube video into an iframe, specifically an
Error: $interpolate:interr Interpolation ErrorHere is the HTML code:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="{{youtubeVideo}}" allowfullscreen></iframe>
</div>
And here is the JavaScript/Angular code:
$http({
method: 'GET',
url: getTankVideos(query)
}).then(function successCallback(response) {
console.debug('response');
console.debug(response);
$scope.youtube = response;
console.log('Youtube');
console.log($scope.youtube);
console.log('Video Url');
$scope.youtubeVideo = 'https://www.youtube.com/watch?v=' + $scope.youtube.data.items[0].id.videoId;
console.log($scope.youtubeVideo);
}, function errorCallback(response) {
// Handle errors here
});
The debug statements show valid values being returned:
response
script.js:129 Object {data: Object, status: 200, config: Object, statusText: ""}
script.js:131 Youtube
script.js:132 Object {data: Object, status: 200, config: Object, statusText: ""}
script.js:134 Video Url
script.js:135 https://www.youtube.com/watch?v=BRtj_TSOHjw