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.
myPlayer?r.fn.init {} __proto__:Object[0]