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="">
<head>
<script src=".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.
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/1999/xhtml">
<head>
<script src="http://ajax.googleapis/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.
Share Improve this question asked Aug 14, 2016 at 9:37 AsitisAsitis 1031 silver badge4 bronze badges 4 |1 Answer
Reset to default 0Well 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!).
myPlayer? – fuxia ♦ Commented Aug 14, 2016 at 10:43r.fn.init {} __proto__:Object[0]– Asitis Commented Aug 14, 2016 at 16:17