Embedding With 'object' Tag Not Working On Dynamic Data

I am trying to embed youtube videoes using the object tag instead of iframes. However, it doesn't work even though element.url points to the correct url. If I replace {{element.url

Solution 1:

The problem has been described in many SO questions and answers. In short, as far as I understood correctly, it's because you "execute" remote <object>. In this case all <object> see as source, is really just literal {{ element.url }}.

You can go around this by creating your own Youtube directive. For example:

app.directive('youtube', function() {
    return {
        restrict: 'E',
        scope: {
          movie: '@'
        },
        link: function(scope, element) {
            varobject = '<object width="560" height="315">' +
              '<param name="movie" value="' + scope.movie + '" />' +
              '<embed ' +
              '  src="' + scope.movie + '" ' +
              '  type="application/x-shockwave-flash" ' +
              '  width="560" ' +
              '  height="315" />' +
            '</object>';
            element.replaceWith(object);
        }
    };
});

Usage in HTML template would be as simple as

<bodyng-controller="MyCtrl"><youtubemovie="{{ movie.url }}"></youtube></body>

And in controller, you have your movie

$scope.movie = { 
    name: 'movie',
    url: '//www.youtube.com/v/YrrzgE8J1KI'
};  

Example Plunker here http://plnkr.co/edit/RJyewh which you can continue to improve by adding new attributes (width and so on) as you see appropriate.

Of course you could wrap any other <object> in directive, too.