jQuery popover with youtube video player: make sure the sound stops!

The magic of jQuery - fun with special effects.

I have just been making a jQuery popover for a client’s site. I must confess, I cheated and adapted the information in this wonderful jQuery popover effects tutorial on teamtutorials.com. It’s a great timesaver for someone like me, as I’m no jQuery maven. I have had hours of fun writing programs in JavaScript, but DOM scripting is still a little bit of a mystery to me.

Well I found it very easy to adapt the code given in the example to my purposes – with a little knowledge it’s obvious how to change the appearance of the popover in any way that you like. In this case I eliminated the background url and substituted some paragraphs of text and … a youtube video.

It became interesting when I tried viewing the new popover in Internet Explorer – when I closed the popover the sound on the video kept playing! There seemed to be nothing at all I could do to stop it. I put this down to a strange IE bug and decided to look into it tomorrow, as IE has many famous bugs. In other words, I didn’t think this was out of the ordinary.

However, later on I wanted to use Taco again, which I had been using for “live previews” as I edited the code earlier. I opened a new document – and that soundtrack started playing again! Now the curious thing was, that the video itself had never loaded in live preview, only in preview (where a browser window opens). Where was this coming from? Something was clearly very wrong and I had to fix it right away – I had already emailed a link to my client for approval.

Well it all comes down to the method used in the script from TeamTutorials. You see, their jQuery just uses the hide() method to close the box when someone clicks. (I had modified this to click on a button – a small div in fact – but that’s another story). This means that all the information contained in that box is still lurking in the DOM: it’s just not visible to the human eye. But it’s certainly audible – at least in some conditions!

The solution? Use remove(), which removes all of the information contained in the relevant container from the DOM. It would also be possible to use destroy(), but apparently that would be overkill. The explanation and instructions in the jQuery documentation are very easy to follow.

Well there you have it, one nasty little problem fixed in under 15 minutes. There’s still the issue of the popover itself sometimes not appearing now it is loaded on the live server. I think that the size of the youtube video may be to blame for that – we shall see.

Hope you find this information useful, if you do please leave me a message. I am always meaning to blog these little factlets when I come across them – it is such a sensible idea. Goodness knows how many times I have wished I made a post about some wretched bug or css nightmare – there’s no sense in having to reinvent the wheel every time an issue comes up …

Tags: appearance, browser window, bugs, design, DHTML, internet explorer, jQuery, popover, remove(), scripting, special effects, splash, writing programs, youtube video

This entry was posted on Thursday, February 10th, 2011 at 11:53 pm and is filed under jQuery, web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.