I have a video that plays in an overlay. When I click the mask to close the overlay, the video won't stop playing and the audio continues to play while I use the app.

Is there a way to make the video pause when the mask is tapped and the overlay closes?

The code for my overlay is shown here:
var video1 = {
            html: '<img src="images/product.jpg" height="100" class="thumbnail" /><div class="thumbnailLabel">Matt</div>',
            listeners: {
                afterrender: function(c) {
                    c.el.on('click', function() {
                        if(!this.popup) {
                            this.popup = new Ext.Panel({
                                floating: true,
                                modal: true,
                                centered: true,
                                width: 682,
                                height: 402,
                                styleHtmlContent: true,
                                scroll: 'vertical',
                                items: [{
                                    xtype: 'video',
                                    url: 'video/video.mp4',
                                    width: 640,
                                    height: 360,
                                    posterURL: 'video/screenshot.png'