Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

click on splashscreen to play embedded Youtube video


  #1  
Old Jan 7, 2015, 02:05 PM
jms5017's Avatar
jms5017
 
112 posts · Jul 2010
NY/NJ Metro area
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!
  #2  
Old Jan 7, 2015, 04:44 PM
CrouchingBruin's Avatar
CrouchingBruin
 
299 posts · Aug 2010
Santa Monica, CA
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>
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.
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!
  #3  
Old Jan 8, 2015, 07:56 AM
jms5017's Avatar
jms5017
 
112 posts · Jul 2010
NY/NJ Metro area
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!
  #4  
Old Jan 8, 2015, 08:36 AM
CrouchingBruin's Avatar
CrouchingBruin
 
299 posts · Aug 2010
Santa Monica, CA
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" 
    width="298" height="175" frameborder="0" allowfullscreen="true">').css('background', 'none');
to this:
Code:
 $(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.
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!
  #5  
Old Jan 8, 2015, 09:31 AM
jms5017's Avatar
jms5017
 
112 posts · Jul 2010
NY/NJ Metro area
Thanks, that did the trick! so javascript has fits if there are extra spaces / line breaks?
  #6  
Old Jan 8, 2015, 10:10 AM
CrouchingBruin's Avatar
CrouchingBruin
 
299 posts · Aug 2010
Santa Monica, CA
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"  \
    width="298" height="175" frameborder="0" allowfullscreen="true">').css('background', 'none');
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!

Last edited by CrouchingBruin; Jan 8, 2015 at 10:15 AM.

Bookmarks

Tags
javascript, youtube videos

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Navigation menu disappearing behind embedded YouTube videos on page Eric Bobrow Page & Category Menu Bars 8 May 25, 2011 06:27 AM
Embedded video not working at all... Alien99 New Versions, & Updating 5 Feb 2, 2011 11:42 AM
Moving a YouTube video around in a post glennvogelsang Center area post/pages 1 Mar 19, 2010 07:18 AM
Atahualpa video tutorial on Youtube everyman New Versions, & Updating 6 Feb 26, 2010 05:02 AM
show youtube and other video in excerpts timdevogel Excerpts, Read more, Pagination 2 May 13, 2009 02:00 AM


All times are GMT -6. The time now is 10:54 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.