Take the 2-minute tour ×

Im sure I have some problems with my code. Im not sure how to mix the raw javascript with my jquery. Here is the relevant code in my js file:

$(document).ready(function() {
    $('#show-video').click(function(event) {
        $('#book').slideDown('slow', function() {

function onPlayerStateChange(newState) {
    if(newState == 0) {

function playVideo() {
    if (ytplayer) {

function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("ytPlayer");
    ytplayer.addEventListener("onStateChange", "onPlayerStateChange");

Basically I have a div with a link to view a video. When the link is clicked the video (previously display none) is shown and the div containing the link hidden. This works fine. The last part is once the video ends the video slidesaway and the div container comes back, which all works. The problem is, once the video is shown I want to execute play video. This is not working.

Im sure its an easy fix/nooby mistake.

PS. If I remove the jquery and add the function playVideo(); on click to the anchor, it plays the video as expected but loses the sliding functionality.

share|improve this question
Just a small style point: You should stick to a single way of adressing the JQuery object. Either by $ or by jQuery. –  nfechner Jul 1 '11 at 17:01
Can you post an example of the working code? Is it more than onclick="playVideo();"? –  George Cummins Jul 1 '11 at 17:02
Are you getting a console error at the line "ytplayer.playVideo()"? Does that function get called? If you're using FF, you can open the JavaScript console and check (I think it's in the tools menu), or you can install or use Firebug. If you're using Google Chrome, you can find the console in the Wrench->Tools menu. –  rav Jul 1 '11 at 17:03
Sorry for the mix, that was a mistake using some other updated code. The working example simply took off the sliding part and showed both divs as stand then a link was simply given that command you posted. –  Michael Jul 1 '11 at 17:48
I just removed all other code from my js file and its seems to work, must have been a conflict with something else I was running –  Michael Jul 1 '11 at 17:50
add comment

1 Answer

You are using an odd mix of $( and jQuery( in your code. You should choose one or the other. $( is preferred unless it conflicts with another library. In the case of a conflict, just jQuery( and use noconflict().

share|improve this answer
Yes sorry for that, some of the code was copied over from my live website which I had updated to using jQuery because of no conflict mode. –  Michael Jul 1 '11 at 17:43
@Michael: No apologies needed. Does your code work differently after you make the change? –  George Cummins Jul 1 '11 at 17:48
Maybe that was the problem but I have restructured it by putting the raw js into its own file. You can see it working at freecss.info/testing there is a link to view a video next to the sign up button on the page. The video slides to replace the div then slides away when ended. –  Michael Jul 1 '11 at 17:57
Although, just testing it now. It doesn't appear to work 100% of the time, the play part that is. Maybe its when you call before the document is ready? –  Michael Jul 1 '11 at 18:05
None of this code will work before the document is fully loaded. You can try keeping the video div hidden initally, and then display it when the document is ready. –  George Cummins Jul 1 '11 at 18:10
add comment

Your Answer


