0

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.

Alex Jj
  • 1,343
  • 10
  • 19
  • 30

3 Answers3

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

Cezar
  • 55,636
  • 19
  • 86
  • 87
Dhiraj Kumar
  • 21
  • 2
1

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

http://support.google.com/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.com/v/XXXXXXX&autoplay=1"></param>
<embed src="http://www.youtube.com/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.net/ivandude/vLrvA/2/

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

Community
  • 1
  • 1
Ivandude
  • 96
  • 8
  • Thank you for your reply. for closing the video or stopping it after click 'X', I am still not sure what to do. I checked the provided link but it is so specific for that particular example (in my view tho). So I could not find the solution. Also I am very basic in JS. It would be great if you give me a more hint or an answer related to the plugin I am using. thanks – Alex Jj Feb 28 '13 at 00:35
  • I have updated my answer and taken some time to help you out with a JS Fiddle link showing how it all works. Click "Run" (and make sure there is jQuery selected on the left hand). – Ivandude Feb 28 '13 at 05:22
  • Thank you very much for your reply and the solution. About my question, Im really new in StackOverFlow and even wasnt sure that here is the right place to ask this question anyway sorry if it wasnt written in the common way. – Alex Jj Feb 28 '13 at 20:15
  • About your solution, it works fine in the link u provided, but I still have problem in adding it to my previous popup plugin. For example in my original plugin I have `launchWindow('#dialogjj');` so based on your solution, should I make it like: `$("#dialogjj").html("OBJECT TAG"); $('#dialogjj-overlay').css('display','block'); $('#dialogjj').css('display','block');` – Alex Jj Feb 28 '13 at 20:15
  • 1
    Thats okay! No problem. It isnt a lot of work but I think you may need to solve that one on your own just cos i dont have enough time to go through it at work. If you understand it and go over a bit of the functions, it should make sense. You can make it work within your existing code and window launching, or you could decide to clean it up a bit. (1st) Remove the Youtube IFrame code, leave
    existing but without any tags inside of course - its going to be filled in by the .HTML written in with jQuery.
     – Ivandude Mar 01 '13 at 00:15
  • 1
    (2) Underneath your LaunchWindow you can put the actual object tag to work there but not the dialogjj-overlay because that is just my example code to replicate a background container for DialogJJ. The way you have created the background container is a little more complex than it needs to be. JS Fiddle is easy to analyze code and a good base to start understanding more functions - once you click run, on the bottom right box you can actually click View Source and get an entire source code in one text file. I might suggest re-working your code to suit around the JS Fiddle i provided even? – Ivandude Mar 01 '13 at 00:15
1

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.

Alex Jj
  • 1,343
  • 10
  • 19
  • 30