0

I'm trying to use this jQuery plugin to load a fullscreen background on a website. I've first implemented it in a static HTML on my desktop, this works fine. I then put everything in my theme and load it up, no errors, no action.

The first thing you look at is syntax errors, typo's in URL etcs

  • When I load the same code in local HTML, it works
  • When I view the source of the WordPress, all the scripts get loaded correctly
  • Used console.log to check if the script was loaded before initialization, it was

I'm using this code to fire it up, before the </head>

<script>
(function($) {
    var myPlayer = jQuery("#bgndVideo").YTPlayer({
        mask:{
            0:'assets/overlay.png'
        }
    });
})(jQuery);
</script>

But still no luck. For reference, the stripped down full code;

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?php bloginfo('stylesheet_directory');?>/assets/jquery.mb.YTPlayer.min.js"></script>

    <script>
    (function($) {
        var myPlayer = jQuery("#bgvid").YTPlayer({
            mask:{
                0:'assets/overlay.png'
            }
        });
    })(jQuery);
    </script>

    <?php wp_head();?>
</head>
<body <?php body_class();?>>
<div id="wrapper">
    <div id="bgvid" class="player" data-property="{videoURL:'9CrTwCFdJnA',containment:'body', showControls:false, autoPlay:true, loop:true, vol:50, mute:true, opacity:1, quality:'large', optimizeDisplay:true}"></div>
</div>
<?php get_footer();?>   

When I try this on a local HTML I see the effect of the plugin that it loads a YouTube iframe inside the .. What's the deal? Been on and off it for a couple of days now, can't figure it out anymore.

  • Do you get any errors in your console? – fuxia Aug 14 '16 at 10:12
  • None, but if I make a deliberate typo I do, so the code is read.. – Alex Timmer Aug 14 '16 at 10:33
  • And logging the myPlayer? – fuxia Aug 14 '16 at 10:43
  • Seems to echo the correct instance r.fn.init {} __proto__:Object[0] – Alex Timmer Aug 14 '16 at 16:17
0

Well I found the culprit, no solution yet though. As I said the code ran well on a static HTML page, so I copied the exact static HTML into my theme, leaving all the rest out, and it didn't work.

So it had to be WordPress related, so I turned off installed plugins one by one and the issue was resolved when I disabled the Crayon plugin. So now onwards in this direction, will update this answer if I find the cause (tips on how to debug something like this are welcome!).

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.