How to embed Twitch player via AngularJS directive?

Hello everyone,

I’m a coding n00b struggling with embedding Twitch on AngularJS.

From my research, it seems like creating a directive and using angular.element is the way to go but now i’ve been stuck at that point for a while.

Here’s my directive function code below:

function testDirective() {

          return {
            restrict: 'EA',
            scope: {
              data: '='
            },
            template: '<script src="https://embed.twitch.tv/embed/v1.js"></script> <div id="twitchemb"></div>',
            link: function($scope, iElm, iAttrs) {
              var script = '<script type="text/javascript">'
                  'var options = {'
                    'width: 854,'
                    'height: 480,'
                    '};'
                'var player = new Twitch.Player("twitchemb", options);'
              '</script>';

              var scriptElem = document.createElement(script);
              scriptElem.attr("src", "https://player.twitch.tv/?autoplay=false&video=v165913358&t=15707s"); // set var appropriately
              element.append(scriptElem);
              }
          };
    };

I think this snippet is not entirely non sense… but don’t hesitate to let me know if it is hehe.

When I run it, I get 0 display from the directive and this error gets logged in the Firefox console:

It’d be amazing if anyone could shed a little light here!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.