AdBlock breaks fullscreen button

Hello Bruno,

On what kind of devices does this happen? Mobile/desktop or both?

Also a link to your website with such a problematic video could be beneficial for us.

Thanks,
Juraj

Hello Bruno,

You can send it to us via revealit.me if you don’t want your link to be public.

Thanks for fast response,
Juraj

Hello Bruno,

it works for me on Chrome and Firefox and even Safari (12.1.1) on mac OS 10.12.6.

Please let us know what browser on what operating system you are using. Also test the video on https://foliovision.com/

Thanks,
Martin

Hello Bruno,

It looks like there’s some issue with FV Vast. Can you please turn on the debug in VAST settings and run the video and check console if any error appears with the ad is loading.

Thanks for using our player,
Juraj

hello bruno,

Thanks for the info. In order to help you we will need link to your website and also the error log from fv vast debug.

Thanks for using our plugins,
Juraj

Hello Bruno,

thanks for the link! I’ve checked your website and there’s clearly some error with VAST or VPAID ad which overlapping the upper part of player. Can you please try to switch to a different ad and try if the issue is still apparent?

Thanks,
Juraj

Hello Bruno,

We’ve found what’s causing the issue. It does appear when user using adblock access the video. Adblock prevents the ad from appearing but it forces the hidden ad to overlap and block the button. I’ve discussed it with our development team and we think perhaps the solution could be to completely prevent videos from playing when user is using adblock with a message similar to “if you want to watch videos on this website, please turn off adblock”.

What do you think about this solution? Let us know!

Thanks,
Juraj

Hello Bruno,

I don’t think any mainstream browser would come with AdBlock pre-installed. But I see that it affects the player negatively, so we will fix it.

The feature to disable the main video playback if AdBlock is enabled would be optional.

Thanks,
Martin

Hello Bruno,

FV Player VAST 7.4.9.727 is out and it fixes the issue – now AdBlock doesn’t break anything.

Thanks,
Martin

Hello Bruno,

please provide a sample page where I can see the issue.

Thanks,
Martin

Hello Bruno,

it works for me. Please try to clear your browser cache, although it shouldn’t be the case, as we did change the plugin version number which is part of the JavaScript URL.

I was using Chrome 79 with AdBlock 4.1.0 on macOS 10.12.6.

Thanks,
Martin

Hello Bruno,

when using Chrome mobile I actually got an ad loaded, but it wouldn’t play. Then after reload there was no ad anymore, but the main video wouldn’t play still.

I tried to play the video MP4 file directly from /wp-content/uploads/2020/01/S…-b….-o…-h…-c…-.mp4 but it wouldn’t play for me either. Please use our video checker to make sure the video encoding doesn’t have any issues: https://foliovision.com/player/basic-setup/how-to-use-video-checker

Also, Chrome on Android doesn’t have AdBlock available.

When using Firefox, it worked fine, the fullscreen button. But I got the “Video not properly encoded” when trying to play the video.

But perhaps it’s because I’m using Android 5 on my phone still.

Thanks,
Martin

Hello Bruno,

no issues on iOS 13.1.3 with Safari.

But once I installed Ad Block I could see the issue. I found that the AdBlocker works differently on that device, so we will get it fixed there.

Thanks,
Martin

Hello Bruno,

please try on https://foliovision.com/player/demos/vast-ads

I improved the way of how we detect AdBlock on iOS. Although I see there is a slight glitch where you can’t enter the fullscreen mode if you hit the button right after the video stars playing, so I’ll improve that.

I also installed a fresh Firefox on iPad with iOS 13 (.1.3) and the VAST ads in it are working just fine. So I’m not sure what blocking it on your end. Perhaps you have some app installed for that? Let us know what you use.

You can already get a new version from https://foliovision.com/my-licenses to get this improvement as I haven’t pushed a new version yet.

Thanks,
Martin

Hello Bruno,

FV Player VAST 7.4.10.727 is out and it improves that issue with fullscreen button not working at the start of video when using AdBlock.

Please let us know if you are still having issues in your Firefox.

Thanks,
Martin

Hello Bruno,

so in your video did you play the video and then tapped that fullscreen button and nothing ever happened?

Then you start scrolling the page and the video stays in a single position and everything scrolls except the video, which can be seen through the player viewport.

That looks like some CSS bug. It seems the video actually is in the fullscreen, but it renders “behind” the website. That would explain why the video doesn’t move as you scroll.

I see it appears for you in both Firefox and Chrome. What Android version you are using? No issues when using Chrome on Android 5.1.1 and 9 on my end.

It seems to me you might be blocking the HTML5 fullscreen feature in your browsers in some way – although at a glance I didn’t find such setting. Please check if you can get the fullscreen to work properly on our homepage video: https://foliovision.com/

But the good news is that it’s not caused by AdBlock anymore.

Thanks,
Martin

Hello Bruno,

of course it’s iOS, I’m not sure why I haven’t realized that as it’s clearly visible in the video.

I see the issue occurs on iPhone with iOS 13 (Chrome, Safari, …). On iPad it works, but while iPad does support HTML5 fullscreen, iPhone doesn’t. Safari on iOS 13 on iPad is so much more powerful, it even has the same user agent as Safari on desktop.

That’s why most players use the native fullscreen mode on iPhone – including WordPress video player or Video.js.

In FV Player we use an CSS fullscreen mode for iPhones. That lets us put custom subtitles or ads on top of the video. But the downside is that the theme CSS can break it if it uses z-index for parent elements – which is exactly your case. Most websites don’t have this issue.

——-

Please enable Settings -> FV Player -> Mobile Settings -> “Alternative iOS fullscreen mode” and see if your VAST ads still work.

As a second option enable Settings -> FV Player -> Mobile Settings -> “Use native fullscreen on mobile” and again, see if your VAST ads still play.

Thanks,
Martin