378 Responses

1. 

   Sonny November 27, 2013 at 8:31 pm · Reply →

   Hi Matteo,

   Can you show a sample code of how to use the “Change Video” button above. To show how to make the array of the videos it will play.

   Thank you, love your work !!

   1. 

      pupunzi November 27, 2013 at 10:23 pm ·

      Hi Sonny,
      The above button can just replace the actual video with another one; the code is simple, you just need to use the “changeMovie” method as follow:

      onclick="jQuery('#bgndVideo').changeMovie({videoURL:'https://www.youtube.com/watch?v=x4eMMD1FtHY',ratio:'4/3'})"

      Where “bgndVideo” is the ID you gave to the element you initialized as player. If you are using the WordPress plugin the ID for the background player is usually “bgndVideo1″.

      If you want to switch between a list of videos you can take a look at the “demo_videoList_autoChange.html” available within the download package; there the “YTPlaylist” method is used instead of the “mb_YTPlayer” to play multiple videos sequentially with the ability of switching to the next or to the previous video via butoons. If you are using WordPress this method is not yet implemented.

      Another way is to code your own solution as follow:

      
//create an array of objects representing the videos you want to play
var videos = [
{videoURL:"VuaJAgx0x_4",containment:'body',autoPlay:true, mute:false, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:true, quality:"large"},
{videoURL: "3ovA7zeviRo",containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:false, quality:"large"},
{videoURL: "u9k1FaMIYTs",containment:'body',autoPlay:true, mute:false, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:true, quality:"large"}
];
//define an index to increment:
var idx = -1;
//create the "next" function
function nextVideo(playerID){
idx++;
//reset idx if higher than the videos length
idx = idx < videos.length ? idx : 0;
var video = videos[idx];
jQuery("#"+playerID).changeMovie(video);
}
//create the "previous" function
function prevVideo(playerID){
idx--;
//reset idx if higher than the videos length
idx = idx >= 0 ? idx : videos.length-1;
var video = videos[idx];
jQuery("#"+playerID).changeMovie(video);
}


      On the HTML side create two buttons,
      one for the next action adding:
      onclick="nextVideo('myPlayerID')"
      one for the previous action adding:
      onclick="prevVideo('myPlayerID')"

      Didn’t test this code, but should be something like that .

      Bye,
      Matteo

2. 

   Alex November 25, 2013 at 3:39 am · Reply →

   i have a problem thats the video ius darker then normal, how i change this ?

3. 

   Stephan November 24, 2013 at 2:48 pm · Reply →

   Hi Matteo,

   a general question, that you may know about:

   Is there already a workaround existing that makes youtube videos (and of course your script) autoplay on mobile devices, especially android and ios?

   Cheers, Stephan

   1. 

      pupunzi November 24, 2013 at 5:29 pm ·

      Hi Stephan,
      For what concern Youtube videos there’s no way to make them autoplay on mobile devices. The youtube javascript API is almost unavailable for those devices for their security policy; that’s why the mb.YTPlayer doesn’t work on both iOs and Android.
      Bye,
      Matteo

4. 

   Halation November 21, 2013 at 9:30 pm · Reply →

   Hi, I’ve used your brilliant plugin to create an animated “Coming Soon” page for my site, but it’s cutting of the start and end of the video, and I can’t work out what’s wrong? Can you help?

   site:

   halationfilms.com

   1. 

      pupunzi November 21, 2013 at 10:36 pm ·

      Hi,
      There’s nothing wrong; the plugin cuts the first and the last second of the movie to prevent the display of the “play” button in the Youtube chrome-less player.
      You should edit the video adding few seconds at the beginning and at the end.

      Bye,
      Matteo

5. 

   Jason Davies November 20, 2013 at 8:45 am · Reply →

   Hi

   Is there a way to turn off YouTube advertising from popping up all the time?

   1. 

      pupunzi November 20, 2013 at 8:30 pm ·

      Hi,
      You can’t turn off advertising for videos provided by accounts other than your.
      On your YT account settings you can turn off advertising for videos that doesn’t contain material with copyright.

      Bye,
      Matteo

6. 

   Jo November 9, 2013 at 5:00 am · Reply →

   Hi,
   is there a way to disable it for ipad and smaller devices via jquery or media queries?
   Many thanks!
   Jo

   1. 

      pupunzi November 13, 2013 at 3:31 pm ·

      Hi Jo,
      I just introduced a bug with one of the last updates; In the jquery.mb.YTPlayer.js file there’s a part of code where I detect if the context is a touch device to let the component show if it’s not used as background… I just forgot to disable it if it’s used as background…
      You should change the code from line: 265 to line 281 with:
      
if(isDevice && !YTPlayer.isBackground){
new YT.Player(playerID, {
height: '100%',
width: '100%',
videoId: YTPlayer.videoID,
events: {
'onReady': function(){
$YTPlayer.optimizeDisplay();
playerBox.css({opacity: 1});
YTPlayer.wrapper.css({opacity: 1});
$YTPlayer.optimizeDisplay();
},
'onStateChange': function(){}
}
});
return;
} else if (isDevice){
return;
}


      I’ll update the component in the next future.
      Bye,
      Matteo