When using the video playlist option the fullscreen function gives an error

[dvdgiesen]

In chrome desktop browser, only the initial video will go fullscreen all the others after calling next or previous give the following error:

jquery.mb.YTPlayer.js:1347 Uncaught TypeError: videoWrapper.css is not a function
at jQuery.fn.init.fullscreen [as YTPFullscreen] (jquery.mb.YTPlayer.js:1347:19)
at HTMLSpanElement.eval (jquery.mb.YTPlayer.js:2093:22)
at HTMLSpanElement.dispatch (jquery.js:5145:27)
at elemData.handle (jquery.js:4949:28)

Here's my code:

HTML:

<div id="wrapper">

  <div class="player-container">
    <div id="P1" class="player">
    </div>
  </div>
  
  <div class="controls">
    <button class="command" onclick="jQuery('#P1').YTPPlayPrev()">Prev</button>
    <button class="command" onclick="jQuery('#P1').YTPPlayNext()">Next</button>
  </div>

  <div class="dida">
    Loading video info...
  </div>
  
</div>

Javascript:

window.$ = window.jQuery = jQuery;

var myPlayer;
     var videos = [
        {
          videoURL: "59Rkw_Lg-0U",
          containment:'#P1',
          showControls:true,
          startAt:0,
          mute:false,
          autoPlay:true,
          loop:false,
          opacity:1,
          showYTLogo:true,
          coverImage:'images/Animation.gif',
          mask:'images/Theater.png',
          realfullscreen: true
        },
        {
          videoURL: "916rOYwrEWY",
          containment:'#P1',
          showControls:true,
          startAt:0,
          mute:false,
          autoPlay:true,
          loop:false,
          opacity:1,
          showYTLogo:true,
          coverImage:'images/Animation.gif',
          mask:'images/Theater.png',
          realfullscreen: true
        }
      ];

jQuery(function () {

        jQuery.mbYTPlayer.apiKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

        myPlayer = jQuery("#P1").YTPlaylist(videos, false, function (video) {
                /*
                                if (video.videoData) {
                                jQuery("#videoID").html(video.videoData.id);
                                jQuery("#videoTitle").html(video.videoData.title);
                                }
                */
        });

        myPlayer.on("YTPData", function (e) {
                $(".dida").html(e.prop.title + "<br>" + e.prop.description);
                console.log(e.prop);
        });

        myPlayer.on('YTPFullScreenStart', function () {
                myPlayer.YTPRemoveMask();
        });

        myPlayer.on('YTPFullScreenEnd', function () {
                myPlayer.YTPAddMask('images/Theater.png');
        });

});

Thanks, Dirk

[pupunzi]

Do you have a public page where I can see the behavior and analyze your script?

[dvdgiesen]

Hi Pupunzi,

Thanks for your reaction!

You can see what i mean at https://dev-rotyounges.web.app/

So on initial page load you will see that the fullscreen function works when using your toolbar

But as soon as you either click previous or next the fullscreen function gives this error i mentioned here above.

[pupunzi]

I have just updated the plugin (version 3.4.6), which fixes this issue.
Check npm repo: https://www.npmjs.com/package/jquery.mb.ytplayer

[dvdgiesen]

Great Matteo,

Ran npm update and it works like a charm!

Actually running 'npm install jquery.mb.YTPlayer' initially (haven't tested it in this latest version) also gave me an high vulnerability error on a dependency called trim-newlines in meow which in turn came from one of the uglify dependencies.

So i used:

"overrides": { "meow": { "trim-newlines": "3.0.1" } }

in my package.json

Just so you know :-)

Cheers for your great library and art work!