i am trying to get this particular script to work on a custom worpress template page; it is a jquery script to start an embedded youtube player which works when used on a plain html page, but for some reason i am unable to get it to work with a WP custom template page. Here is the said code below:

(function($){
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('video', {
events: {
  'onReady': onPlayerReady
}
});
function onPlayerReady(event) {
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
});
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
$('a').click(function(e) {
e.preventDefault();
    $(this).fadeOut('slow');
    $(this).siblings('.loadingImage').fadeOut('slow', function() {
    $(this).siblings('.loadingVideo').fadeTo('slow',1);
    });
});
 })(jQuery);

I have placed this in a separate youtubevideo.js file and i have enqued it in the functions.php file like this:

wp_enqueue_script( 'jquery' );
wp_register_script('youtubevideo', get_template_directory_uri() . /js/youtubevideo.js', array('jquery'));
wp_enqueue_script('youtubevideo');

The html that i am using is set up like this:

<iframe width="480" height="293" id="video" src="//www.youtube.com/embed/xxxxxxx  enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>
<img class="loadingImage" src="someimage.jpg">
<span class="loadingImage">sometext</span>
<a  id="play-button" alt="play video"></a>

I know i am doing something wrong with the JQuery part, because if i modify this script and remove the JQuery specifics (fadeOut and such), the script works (it loads the video at least, which can then be run).

Any pointers much appriciated.

Read more here: Need to make this script work on WordPress page


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , ,

Wordpress related questions and answers: