pupunzi / jquery.mb.YTPlayer

use a custom yutube player for a video as background on jQuery framework
https://pupunzi.com/mb.components/mb.YTPlayer/demo/demo.html
1.3k stars 431 forks source link

Error YTPlayer.opt.containment.css is not a function #199

Closed JulieLorin closed 8 years ago

JulieLorin commented 8 years ago

I am trying to use this awesome plugin, with a video list :

<div id="timelapse-video" style="height:100%;height:600px;" class="player">Timelapse</div>

var timelapseVideos = [
        {videoURL:"0LOsqE2pAS8",containment:'self',showControls:false, loop:false, showYTLogo: false, addRaster: true, stopMovieOnBlur: false, autoPlay:false, mute:true, startAt:0, opacity:1},
        {videoURL: "TsdxINBWsDU",containment:'self',showControls:false, loop:false, showYTLogo: false, addRaster: true, stopMovieOnBlur: false, autoPlay:false, mute:true, startAt:0, opacity:1},
        {videoURL: "GtzlrTNdkN8",containment:'self',showControls:false, loop:false, showYTLogo: false, addRaster: true, stopMovieOnBlur: false, autoPlay:false, mute:true, startAt:0, opacity:1}
    ];

    jQuery("#timelapse-video").YTPlaylist(timelapseVideos, true, function(video){
    });

But as soon as I run jQuery('#timelapse-video').YTPPlayNext(); in the console, the youtube video transforms into a grey field, and I have the following error : YTPlayer.opt.containment.css is not a function Here : YTPlayer.opt.containment.css( {

I don't understand what could cause this issue.

Thanks

JulieLorin commented 8 years ago

After a little investigating, I found out that this issue only happens when the videos has autoplay to false. The error is not there if I set it to true.

When the issue happens, if I click on the grey screen, the video loads.

(What I would wish to accomplish is to have the first video not to play automatically, but that the next ones play automatically)

Thanks

JulieLorin commented 8 years ago

Sorry for all the Spam.

By adding

jQuery('#timelapse-video').on("YTPReady",function(e){
       console.log("ready");
       jQuery("#timelapse-video").YTPPlay();
    });

I am able to load the first image of the video after a YTPPlayNext() but it doen't play the video. When I add a second jQuery("#timelapse-video").YTPPlay(); in the fonction, nothing happens, but if I run jQuery("#timelapse-video").YTPPlay(); in my console, it plays the video (I guess a delay is necessary)

pupunzi commented 8 years ago

On my tests, setting the first video autoplay to false does what I aspected... the first video is in pause till I press play, when it goes to the next (that has the autoplay set to true) it start the video immediately. Try if the new 3.0.8 release fixes your issue.

JulieLorin commented 8 years ago

Well, I am not really sure of all I did, but I finished by making it work exactly like I wished with the latest release ! It's really a great plugin, it saved my life for this project !