click on splashscreen to play embedded Youtube video
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: Code:
<script> 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:
Code:
$(this).html('<iframe src="http://www.youtube.com/embed/9NETPGxan44?autoplay=1" Code:
$(this).html('<iframe src="http://www.youtube.com/embed/9NETPGxan44?autoplay=1" width="298" height="175" frameborder="0" allowfullscreen="true">').css('background', 'none'); |
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):
Code:
$(this).html('<iframe src="http://www.youtube.com/embed/9NETPGxan44?autoplay=1" \ |
All times are GMT -6. The time now is 04:45 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.