Media player template shows a black box on stopping

Question

I have a template which is dynamically added with object tag for showing videos.

Here is the template code (template name is saved in scope variable 'topicArtifactsUrl'):

<script type="text/ng-template" id="mediaTemplate">
  <div style="display:none;" id="mediaTemplateDiv" ng-show="modules.showMediaPlayer"></div>
</script>

I am dynamically adding object tag in the controller on selection in a dropdown list. The videos are rendering properly. The problem is when I click on another link in the page, I need to load some other content and remove the media player object. I use this code to do that:

$scope.stopMediaPlayer = function () {

        $scope.modules.showMediaPlayer = false;
        if (typeof (Player) != 'undefined' && Player.controls) {
            Player.controls.stop();
        }

        $scope.topicArtifactsUrl = ''; //Clear the template in which media player object is loaded

    }

The issue is the media player is stopped, but a black box still appears on the screen after invoking stopMediaPlayer(). What am I doing wrong?

Answer 1

I resolved it. I had to hide the div for media player:

$("#mediaTemplateDiv").css('display', 'none'); //Added this line to stopMediaPlayer()