Fullscreen not working & iOS problem

Hello,

Our customer got some inline videos, which autoplays when they're in the viewport. Unfortunately, there's two problems.

1.

Since we also need to play the videos on mobile, it's suddenly not possible to view the videos in fullscreen. The option is simply not on the controls bar. It seems like the "problem" is:

YTPlayer.opt.realfullscreen = isIframe() || YTPlayer.opt.useOnMobile ? false : YTPlayer.opt.realfullscreen;

Because we've tried to change it to: YTPlayer.opt.realfullscreen = isIframe() || YTPlayer.opt.realfullscreen;

And when we do that we get the fullscreen option back. It works on all our test devices, except on iOS. We tested on a iPhone 7 with iOS 11.3

We really need the fullscreen option to work on all devices/browsere, even though we got mobile and autoplay when in viewport. What can be done about this?

2.

It's not possible to unmute in Safari. We addressed the problem here: https://github.com/pupunzi/jquery.mb.YTPlayer/issues/351, but it's still not working in our case.

We've updated the script to v. 3.2.3.

Our videos got the settings "mute: true" & "showControls: true". This is where our example differs from yours, I assume.

In your demo your mute/unmute button calls the YTPToggleVolume(), but the buttonBar(created by your code) calls against the mb_YTPMuteUnmute(which then calls against YTPMute() & YTPUnmute()).

If we change:

      var MuteUnmute = jQuery("<span>" + jQuery.mbYTPlayer.controls.mute + "</span>").addClass("mb_YTPMuteUnmute ytpicon").click(function () {
        if (YTPlayer.player.getVolume() == 0) {
          jQuery(YTPlayer).YTPUnmute();
        } else {
          jQuery(YTPlayer).YTPMute();
        }
      });

to:

      /* mute/unmute button*/
      var MuteUnmute = jQuery("<span>" + jQuery.mbYTPlayer.controls.mute + "</span>").addClass("mb_YTPMuteUnmute ytpicon").click(function () {
        if (YTPlayer.player.getVolume() == 0) {
          jQuery(YTPlayer).YTPToggleVolume();
        } else {
          jQuery(YTPlayer).YTPToggleVolume();
        }
      });

it works. Is this something you'll implement in the next version of your code, so we won't have to change this part every time we need to update it or?

Thanks in advance, Camilla

Hi, For the first point, the condition was wrong (a bug) but the Full-Screen API is not supported on Safari for iOs. On the next release the condition will check if the full-screen API is available:

var fullScreenAvailable = document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled;
YTPlayer.opt.realfullscreen = isIframe() || !fullScreenAvailable ? false : YTPlayer.opt.realfullscreen;

For the second point, the mute/unmute issue on iOs should have been fixed from version 3.2.2; anyway, on the next release, the MuteUnmute button will use the "YTPToggleVolume" method:

var MuteUnmute = jQuery("<span>" + jQuery.mbYTPlayer.controls.mute + "</span>").addClass("mb_YTPMuteUnmute ytpicon").click(function () {
        jQuery(YTPlayer).YTPToggleVolume();
});

All the best, Matteo

pupunzi / jquery.mb.YTPlayer

Fullscreen not working & iOS problem #373

1.

2.