Teads: AutoplayDetection causes fullscreen video on WKWebView

[webberig]

Type of issue

Bug

Description

We encountered some strange behavior in our mobile app after updating prebid.js. A full screen native media player appears with a black 1-second video.

https://github.com/prebid/Prebid.js/assets/3446164/19c81f51-1af8-45c4-bfbf-7bf0000189c2

This is caused by the autoplay detection: https://github.com/prebid/Prebid.js/blob/7ab6165e342294fafa087135af219f3f88f0e220/libraries/autoplayDetection/autoplay.js

The app is built using Cordova and Ionic which uses a WKWebView component to render the web application. Apparently, WKWebView has a property allowsInlineMediaPlayback which - when turned off - forces video content to be displayed in a native fullscreen controller.

This property is turned off by default on iPhone, turned on by default on iPad.

The autoplay detection of prebid.js plays a small video to determine wether autoplay is supported, which is invisible in most common browsers but seems to have a disturbing side effect in WKWebView.

Steps to reproduce

This can only be reproduced in a native iOS application using a WKWebView which in turn contains a webpage that is running prebid.js.

Test page

Providing a demo app has little use as you need to have XCode installed and run the app in Simulator. One does not simply install an app from unknown origin on iPhones ;-)

I'm hoping the WKWebView documentation is enough to prove the bug being presented.

Expected results

prebid.js should not bother a user with a fullscreen 1s black video. The current approach can be considered hacky at best, so I would recommend looking at proper feature detection such as this draft spec: https://www.w3.org/TR/autoplay-detection/

Actual results

As soon as prebid.js is loaded, the user gets a fullscreen 1s black video. After closing it (by swiping or a close button in a corner of the screen), normal behavior is resumed.

Platform details

Tested with prebid.js v8.45.0 Browser is a WKWebView inside a native iOS mobile app, built using XCode 15.3. According to docs, this property is present in iOS version >= 8.0

Other information

[patmmccann]

cc @github-matthieu-wipliez

fwiw only Teads adapter uses this. One solution could be to disable Teads while the fix is pending.

[github-matthieu-wipliez]

Hi @webberig, sorry for the trouble! I'm not sure why the video is displayed as the video element we create is not even inserted in the DOM. I'll try to see if setting display: none on the element fixes this.

I would have been very happy to use a standard feature, unfortunately the getAutoplayPolicy is only available on Firefox :/

[github-matthieu-wipliez]

Hi again, I have failed to reproduce it locally using a WKWebView with a configuration that sets allowsInlineMediaPlayback = false and loads a simple HTML page running the piece of script from the autoplay detection. I'm using XCode 15.3 and tested with the simulator (iPhone 15, iOS 17.2 and iPhone 15, iOS 17.4).

How is Prebid.js loaded? Do you have something else specific on your WKWebView? I'm trying to find a way to reproduce it so I can find a way to fix it

[whatadewitt]

@github-matthieu-wipliez does your cordova config support AllowInlineMediaPlayback for iOS? (https://cordova.apache.org/docs/en/3.2.0/guide/platforms/ios/config.html)

It would appear the autoplay detection would be great, but is unsupported at this time on most browsers. If you check the doc link above I think there is a solution you could try in there?

[github-matthieu-wipliez]

Hi @webberig, good news, I've managed to reproduce the bug!

@whatadewitt I don't use Cordova, I'm directly testing in an iOS app using a WKWebView with a custom configuration.

I had not set mediaTypesRequiringUserActionForPlayback so it still had the default value (which appears to be .all) so even if I set allowsInlineMediaPlayback = false when I started the autoplay detection then iOS would prevent the video from starting (because no gesture was made). Setting both allowsInlineMediaPlayback = false and mediaTypesRequiringUserActionForPlayback = [] makes the video player start in fullscreen without any user interaction, as in your example.

That being said, the Teads ad player appears to assume that allowsInlineMediaPlayback is true and that video would play inline and not in fullscreen; in other words, even if I fix autoplay detection, our ad player would still play video ads directly in fullscreen (not sure if this is what you intend?)

I see several ways to fix this:

• in your app, leave mediaTypesRequiringUserActionForPlayback to its default value so that no video opens for a user until they interact with the page.
• set allowsInlineMediaPlayback = true in your application. It allows inline playback, but video without playsinline will still be in fullscreen, that's kind of the best of both worlds.
• in the autoplay detection, I add a condition to check if I can play the video inline, and if I can't I don't run the autoplay detection.

What do you think?

[webberig]

Thanks for the efforts @github-matthieu-wipliez!

It appears that the cordova ionic-webview has an undocumented configuration which allows us to set the allowsInlineMediaPlayback to true (https://github.com/ionic-team/cordova-plugin-ionic-webview/blob/master/src/ios/CDVWKWebViewEngine.m#L204). That did solve it for our app. 🎉

It would be an improvement to prebid if you were able to detect that inline playback is allowed or not. Not just for the mock video, but for real ads too. Displaying ads in a fullscreen native player is probably not desirable ;-)

[github-matthieu-wipliez]

That did solve it for our app. 🎉

Great!

I have tried to see if there was a way to detect if the video plays inline or not, and it seems that it's only possible to do that after the video has started playing (so it's already playing in fullscreen).

After discussing with my colleagues, our Teads player is only supposed to be used in an environment where playsinline is true. I propose that we update our documentation here: https://github.com/prebid/prebid.github.io/blob/891d45baf2f20eacfe3b9fa7045692d7db7bf26d/dev-docs/bidders/teads.md?plain=1#L28 to clearly state that requirement. @patmmccann is it an acceptable resolution?

[whatadewitt]

Apologies @github-matthieu-wipliez I tagged you in my response where I should have tagged @webberig -- regardless, glad you are sorted :)

[patmmccann]

@github-matthieu-wipliez we'll discuss in committee tomorrow. I'm not familiar enough with how often this may occur to weigh in

[aanton]

I have tried to see if there was a way to detect if the video plays inline or not, and it seems that it's only possible to do that after the video has started playing (so it's already playing in fullscreen).

Could the "autoplay detection" feature be optional to avoid this issue on current iOS APPs that does not have the proper configuration?

[github-matthieu-wipliez]

Could the "autoplay detection" feature be optional to avoid this issue on current iOS APPs that does not have the proper configuration?

Something I don't quite understand is that this feature has been part of the Teads ad player for years without any issues. Do you have the Teads adapter enabled by default but not configured? Is it playing any ads?

[aanton]

Hi @github-matthieu-wipliez,

Something I don't quite understand is that this feature has been part of the Teads ad player for years without any issues. Do you have the Teads adapter enabled by default but not configured? Is it playing any ads?

We use the Teads adapter in our Prebid integration, but only with banner media types. After a recent upgrade of the Prebid version, this issue has appeared. It is related to the automatic "autoplay detection" recently added in https://github.com/prebid/Prebid.js/blob/7ab6165e342294fafa087135af219f3f88f0e220/libraries/autoplayDetection/autoplay.js#L41-L42

That code was not included in previous versions of the Teads adapter (I have looked for it in 8.36.0 version). About using the "Teads ad player", I am not sure about it. I don't know the resources used when Teads wins the auction and its creative is displayed. As I have commented, we only use the Teads adapter for banner media types.

Thanks for your help!

[lcorrigall]

Discussed in the PMC, and we should also add this situation to our documentation as other bidders may also run into this problem.

[github-matthieu-wipliez]

Hi @github-matthieu-wipliez,

That code was not included in previous versions of the Teads adapter (I have looked for it in 8.36.0 version). About using the "Teads ad player", I am not sure about it. I don't know the resources used when Teads wins the auction and its creative is displayed. As I have commented, we only use the Teads adapter for banner media types.

Thanks for your help!

Hi @aanton, what I mean is that while the adapter did not include this code, the Teads ad player runs this code as soon as it starts, regardless of the media type. What did change though is that the video used to be fetched from an external URL, and was one frame long, whereas the new video is embedded and is 1 second long. I will try changing this and see if the video still opens.

Discussed in the PMC, and we should also add this situation to our documentation as other bidders may also run into this problem.

@lcorrigall Hi Luke, I'm not sure what documentation you're referring to, should this be part of the general Prebid.js guidelines?

[github-matthieu-wipliez]

What did change though is that the video used to be fetched from an external URL, and was one frame long, whereas the new video is embedded and is 1 second long. I will try changing this and see if the video still opens.

I just tried, and same thing 🤷

[aanton]

Hi @github-matthieu-wipliez.

In my opinion, in the current version the autoplay code always runs if the Prebid file includes the Teads bids adapter, but in the previous versions it didn't. In the previous versions (before 8.42.0), the Teads ad player was only included if the Teads bid was the winner bid in Prebid and, also, the ad server didn't have a better campaign to show (like a more expensive campaign).

So the problem always happens with the newer Prebid version (if it includes de Teads bi adapter) but in the previous versions it only happened in some cases (if the Teads creative was displayed).

[github-matthieu-wipliez]

Hi @github-matthieu-wipliez.

In my opinion, in the current version the autoplay code always runs if the Prebid file includes the Teads bids adapter, but in the previous versions it didn't. In the previous versions (before 8.42.0), the Teads ad player was only included if the Teads bid was the winner bid in Prebid and, also, the ad server didn't have a better campaign to show (like a more expensive campaign).

That's right, from what I see there was no ad served on zimmo (in 2024), which could explain why you never noticed the problem.

[patmmccann]

@github-matthieu-wipliez : Luke is referring to the reference page on building a bidder https://docs.prebid.org/dev-docs/bidder-adaptor.html