YOUTUBE PLAYER CONTINUE PLAYING A VIDEO IN THE BACKGROUND

Am creating a sencha app which includes using the YouTube player. The player works fine, But the problem is that when am navigating the app, the video stays playing in the background. Even when i try to remove the view from the viewport the loaded video continues to play,

Here is my code:

Code:

 Ext.define('MyApp.view.YouTubePlayer', {
 extend: 'Ext.Component',
 xtype:'YouTubePlayer',
 alias: 'widget.YouTubePlayer',


 config: {
  url: 'http://ift.tt/Ajy3Fh',
  videoId: 'nX-utubVg0w',
  itemId:'YouTubePlayer_id',
  cls:'x-player-panel',
  vWidth: '100%',
  vHeight: '80%',
  style:'background-color:#222 !important;',
   autoPlay: 1,
  autoHide: 1,
  loop: 0,
  modestBranding: 0,
  start: 0,
  styleHtmlContent: true
 },


 initialize: function() {
 
  this.callParent(arguments);
//  console.log(Ext.create('MyApp.view.YouTubePlayer').getVideoId());
                var LineupStore =Ext.getStore("LineupStore");
                        var vid_id = LineupStore.getProxy().getExtraParams().videoid;
        this.setVideoId(vid_id);
  var out = Ext.String.format(
   [
    '<div align="center" style="width:100%;height:100%;">',
    '<iframe width="{0}" height="{1}" src="{2}{3}"',
    'frameborder="0" allowfullscreen="1"></iframe>',
    '</div>'
    ].join(''),
    this.getVWidth(),
    this.getVHeight(),
        //console.log(this.getVideoId() ),
    this.getUrl(),
    this.getVideoId() 
   );


   this.setHtml(out);
 }
});

Even when I play another video from the playlist the first video will still be playing in the background.

Any solution.. Thank You in Advance