I have a popup layer on my website that show the latest news on it. Now I want to embed a YouTube video on it, that plays once the user open the website. And I would like it to stop playing after the user close the popup page. I have tried SoundCloud player and it stops when I close it.

Here is the live link.

You can also download the file source file on here (.zip): Source Files

So I want to make the video stops playing when the user closes the popup page.

Any idea? Thanks in advance.

I have a popup layer on my website that show the latest news on it. Now I want to embed a YouTube video on it, that plays once the user open the website. And I would like it to stop playing after the user close the popup page. I have tried SoundCloud player and it stops when I close it.

Here is the live link.

You can also download the file source file on here (.zip): Source Files

So I want to make the video stops playing when the user closes the popup page.

Any idea? Thanks in advance.

• javascript
• css
• youtube
• soundcloud
• popupwindow

Share Improve this question Follow asked Feb 27, 2013 at 23:09 Alex JjAlex Jj 1,3931010 gold badges1919 silver badges3030 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Friend's

Don't try to close the facebox/fancybox pop up window. Try to create a container that holds the video file/embed code. After clicking on Close link, just remove the HTML of that embed/video file container.

Ex. <div id="myVideoFilePlay">Video File/Embed Data</div>

Script File:

document.getElementById('remodeVideoPlayer').innerHTML ="";

After that close the fancy box

Here is some information about the auto-play feature for embedding in YouTube.

http://support.google./youtube/bin/answer.py?hl=en&answer=1181821

"To make it autoplay, just put &autoplay=1 after the video ID so it looks like this:"

<object width="425" height="350">
<param name="movie" value="http://www.youtube./v/XXXXXXX&autoplay=1"></param>
<embed src="http://www.youtube./v/XXXXXXX&autoplay=1" type="application/x-shockwave-flash" width="425" height="350">
</embed></object>

As for stopping the video, I advise you have a look here and set up some simple functions to do the pausing upon clicking "X". See: How to pause a YouTube player when hiding the iframe?

EDIT: Added more info..

I can see you set your jQuery to #dialogjj upon the site loading, and then the HTML is inside of the div so setting it to display:none; it wont stop it playing. I have an idea to make it work - there may be a better one out there with nicer jQuery but this works fine. I feel that no one is going to reply further due to the way the question was asked/not very easy to look into unfortunately. That is perhaps why you got a downvote on this question, have a look how other people ask questions here for future guide, its generally not just giving links to your website expecting people to look, instead try to pin point your problem adn what you have tried so other people can have a clue about it, but we all start somewhere so dont worry :).

My idea is that you actually set the contents FOR #dialogjj with jQuery (so the embed code is put in via the JS file and not the HTML page) and in that same way you can actually append it to get rid of that embed code. I have set up a simple JSfiddle that does this in the same fashion as you want. Its up to you to merge it into your code though :)

JS FIddle link http://jsfiddle/ivandude/vLrvA/2/

If you like the solution please click tick as the answer :D my first one maybe.. haha

The answer was really easy. When I used the old object embed code, it just worked. Thanks for the suggested solution but it works for iframe. But does not need any additional code.