Unable to use this under ionic modal.

[niyando]

Hi, Thanks for this awesome tool. I am trying to use this inside a modal box, specifically ionicModal service http://ionicframework.com/docs/api/service/$ionicModal/ . But it doesn't work inside the modal. It works if I put it on parent template.

error i get:

TypeError: Cannot set property 'width' of null
    at P.g.$ (www-widgetapi.js:79)
    at angular-youtube-embed.js:238

[brandly]

can you recreate the issue in a JSFiddle or something similar?

[niyando]

I have setup a plunkr that demonstrates this issue. Let me know if you have more questions. Would be happy to help. http://plnkr.co/edit/TtLd6SnZQmBau7Hs8gLU?p=preview

[brandly]

Thanks for the plnkr! this seems to be some odd DOM manipulation caused by ionicModal. I put the more readable source into your plnkr to debug.

It looks like the link function gets called for both the video inside the modal and the video outside as soon as the page loads. The TypeError: Cannot set property 'width' of null appears to actually happen to the video outside the modal, because they're removing that content from the DOM or something, so when we call player.setSize, even tho we have a reference to scope.player, it looks like it's not in the DOM anymore.

As for the modal video not showing up, I believe it's due to ionicModal binding the view to scope before the view is actually in the DOM. then, when we create a YouTube player and give it the id of the element, it's unable to find that element in the DOM.

It's not pretty, but a workaround I found is to set the video id after the modal is in the DOM. This would look something like

    $scope.openLocationsModal = function() {
      $scope.locationsModal.show();
      $timeout(function () {
        // Wait until after showing modal to set the video id
        $scope.theBestVideo = 'sMKoNBRZM1M'
      }, 300)
    };

You can view the working code here :star2:

[niyando]

Thanks for such a quick turnaround. This fix indeed works. :+1: