Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Client side video channel

Hello I have a simple html only video channel (no server side). The video has a menu- to switch between the channels. these are just hidden div's. For each channel there are 3 video's, and as you click on the small one, the big main video goes back to the side list, and the small one becomes the main video.

I have two issues I need help with:

  1. If you click the small thumbs double or triple, the click event gets ecxecuted multipale times and it results in all three video's showing, when there should always be two at all times.

  2. when a video is playing (they are youtube) and you click on the menu to see another channel, the video must stop, because otherwise you can hear it (because it's just a hidden div).

link to live example:

note: the video's will not only be youtube. They are intended to be both youtube + another 3rd party video supplier. so you can see in the code it has some refrence to that.

Thank you for your time

User Gravatar


Posted May 22 2014 2:03 UTC


  • Assigned To cyeong
  • Solved
  • javascript

13 Replies

Hey Defna,

Can you provide a link or sample of the code?



User Gravatar


Posted May 22 2014 2:06 UTC

just edited the post and added it :)

User Gravatar


Posted May 22 2014 2:07 UTC


For 1, I'd suggest adding some sort of timeout for your click event, that's a quick hack way that I would suggest. I could suggest better fix if you have a repo somewhere that I can take a look at.

As for problem 2, I think this is something that you can take a look

User Gravatar


Posted May 22 2014 2:12 UTC

Hey. I have the stop video code, and it is working, I just need to get somehow the id of the video playing. I've tried to iterate on all video id's but it brakes the code. So the issue here is really knowing which video is playing. (look at line 101-107 in functions.js)

Time out which event? I want the video to switch immediately... maybe there is something i am not seeing?

I can give ftp access to it. as you can see its just a demo i've uploaded for these issues. But maybe there is a way to give it in private?

User Gravatar


Posted May 22 2014 2:17 UTC

Hmm, if you noticed the url of those youtube videos, you'll notice that the id of the video that you need is already inside the youtube url. For example, the john kerry video, its iframe id is j7kSlkU4wKU and the url happens to be

As for the event, I'll try looking for the code in your site, brb

User Gravatar


Posted May 22 2014 2:30 UTC

I know of the id. And am using it. The id is stored in an html tag data-related-url and I use it to insert the correct video. But how do I know it started playing? maybe it was inserted as the main video but never played?

The event that calls the stop video function is the menu click event. How do I know which video is the user looking at, And that the video is actually playing?

User Gravatar


Posted May 22 2014 2:33 UTC

I suggest taking a look at this page

User Gravatar


Posted May 22 2014 2:38 UTC

As for the click event, you could


When things are processing and bind it back after you're done.

It would be helpful if you turn the click event on .video-channel-related-video-thumb into a named function.

So let's say you call it changeVideo, you can then

$(".video-channel-related-video-thumb").bind('click', changeVideo);

at the end of changeVideo function

User Gravatar


Posted May 22 2014 2:55 UTC

bind has been deprecated since jquery 1.7 so I am using the new on/off functions. I have tried using that, but after the off is set it never goes back to on.

User Gravatar


Posted May 22 2014 3:31 UTC

Where did you set it back to on? You'll need to bind it back to the function after the event that triggered it is completed.

User Gravatar


Posted May 22 2014 3:34 UTC

Thank you for all the help. really. I appreciate it very much. But please- don't refer me to material or options.
I just don't have the time to deal with this issue at the moment.

Here is link to download the demo files:

I will send the money (more if needed) to who ever will send me back an html + functions.js that works like I need it to.

Thanks again to everybody.

User Gravatar


Posted May 22 2014 3:37 UTC

You can see the on off is commented out on lines 51 and 86.

User Gravatar


Posted May 22 2014 3:50 UTC

With the function.js that you gave me.


$(".video-channel-related-video:last-child").css('display', 'none');

at line 87


var divs = document.getElementsByClassName('video-channel-main-video');
for (var i=0; i < divs.length; i++) {
    var iframe = divs[i].getElementsByTagName("iframe")[0].contentWindow;
    var func = 'stopVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');

at line 108, basically after the old videop stopping code that you've commented out

User Gravatar


Posted May 22 2014 4:45 UTC


This didn't solve your task? Get your own custom solution.

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions