On this page:
http://www.thestrapsaver.com/video-test/
I want to play an embedded youtube video in a widget when the placeholder image is clicked.
I don't know much about javascript, so I am relying on examples that I find on the web.

I tried the two suggestions here:
http://stackoverflow.com/questions/8...-youtube-movie
(the top answer from stldoug and the one below that from Brand Provoke. the splashpage looks fine regardless of which suggestion I use, but nothing happens when I click the placeholder image.

the javascript suggested in the stackoverflow answer is added to the MTO>Head>Insert code >bottom

What am I doing wrong/missing?
Thanks!

First, you want to move the event handler function inside the jQuery ready function that you defined earlier for the hamburger menu.

Then you want to slightly alter the event handler function:

<script>
jQuery(document).ready(function($){
   ... hamburger menu code ...

$('#video').click(function() {
$(this).html('<iframe src="//www.youtube.com/embed/9NETPGxan44?autoplay=1" width="298" height="175" frameborder="0" allowfullscreen></iframe>').css('background', 'none');
});

});
</script>

Note that instead of setting the click event handler using the on function, it's being set using the click function. Also, instead of an ampersand before autoplay, you want to use a question mark. That's because it's the first parameter in the list. If there were any additional parameters, then you would use an ampersand.

You may also want to add a cursor: pointer; property to the CSS so it's apparent to the user that they can click on the image.

Thanks, I don' think its quite there yet.....I'm wondering if when I moved the script for the embedded video I needed to change the closing paranthesis and brackets on the hamburger.....
when I match up the punctuation, it looks wrong, ...it looks like after the end of the hamburger menu code I should have

// Slide the container back
jQuery("#widgetarea-sidemenu").animate({left: "-100%"}, 700);
menuToggled = 0;
}
};


// for the video placeholder on the in the sidebar widget

instead of: because the ")" is not matching with anything above....
// Slide the container back
jQuery("#widgetarea-sidemenu").animate({left: "-100%"}, 700);
menuToggled = 0;
}
});


// for the video placeholder on the in the sidebar widget
But neither is working.....what am I doing wrong?
Thanks for all your help!

It looks good, except don't break up the code line into two separate lines, i.e., change this:

 $(this).html('<iframe src="http://www.youtube.com/embed/9NETPGxan44?autoplay=1" 
    width="298" height="175" frameborder="0" allowfullscreen="true">').css('background', 'none');

to this:

 $(this).html('<iframe src="http://www.youtube.com/embed/9NETPGxan44?autoplay=1" width="298" height="175" frameborder="0" allowfullscreen="true">').css('background', 'none');

Also, you might try taking off the .css('background', 'none') at the end of that line. What I've found is that there's a lag between when the background image disappears and the iframe gets loaded, resulting in a blank space for a few seconds. If the background image is just left in there, the iframe will cover it up once it loads.

Thanks, that did the trick! so javascript has fits if there are extra spaces / line breaks?

It's OK to break a statement across multiple lines, or with extra spaces, but you shouldn't break a line in the middle of a literal string. You can continue a broken literal string by adding a backslash as the continuation character at the end of the broken line(s):

 $(this).html('<iframe src="http://www.youtube.com/embed/9NETPGxan44?autoplay=1"  \
    width="298" height="175" frameborder="0" allowfullscreen="true">').css('background', 'none');