ampproject / ampproject/amphtml

[amp-story-auto-ads] Fullscreen support ads

Open
#40,183 9 comments 0 reactions 1 assignee Assigned to @powerivq View on GitHub
P2: Soon Type: Feature Request
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

### Description

We've been trying to bring landscape mode to our Stories but the ad slides are currently being displayed in portrait mode.

Would it be possible for you guys to support fullscreen ads?

### Alternatives Considered

I think the only alternative we have here is to break validation and use JS/CSS to remove the locked proportions defined here:

https://github.com/ampproject/amphtml/blob/main/extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css#L32

# Updated Feb 07 25 - Here is the proposal:

## Executive Summary
Support landscape ad assets for amp-story-auto-ads in desktop-fullbleed mode. All screenshots and testing in this document was done with Google Ad Manager (Doubleclick) and custom ads.

## Motivation
We’ve added landscape support for our AMP Stories implementation however the AMP component amp-story-auto-ads does not support landscape assets. Currently in landscape mode, the ad slide shows the ad with letterboxing:

Image

## Proposed Implementations

There is existing code in `amp-story-auto-ads` that resizes and repositions the ad so that it’s more of a “mobile” like size while in desktop-fullbleed mode:

* [https://github.com/ampproject/amphtml/pull/26243](https://github.com/ampproject/amphtml/pull/26243)
* [https://github.com/ampproject/amphtml/pull/35750](https://github.com/ampproject/amphtml/pull/35750)

I propose that we add a new CSS selector to override the size and position of the ad, CTA button, and ad badge. A new experiment will be created `story-ad-allow-fullbleed`. This will only target ads in desktop-fullbleed mode. Here is the desired result:
desired result

## Drawbacks

1. One drawback of this approach is if the story is loaded in portrait mode and the ad server returns a horizontal asset, it would have letterboxing:
drawback

2. Another drawback is if multiple ad assets are returned, we can potentially mistake the wrong asset for determining the aspect ratio.

## **Alternatives**

1. Disable AMP validation and override the CSS
2. A much more involved alternative would be to request for the horizontal ad asset when the user enters landscape mode. This way, we would have both versions of the ad and no letterboxing. However, this would likely require major changes to how `amp-story-auto-ads` show/hide the ad pages and how it requests for ads.

## **Potential Impact and Dependencies**

This will impact stories that currently have landscape mode enabled. However, to the end user, there should be no changes unless the ad asset returned was already horizontal.

## **Unresolved questions**

1. I don’t have access to any of the ad vendors and I’m unsure of how the `amp-ad` will render for all ad vendors. Are there working examples of each ad vendor?
2. Vendors are able to return both videos and images in the same ad request. Here is an example:
multiple assets

The video is in the background (the speaker) and the image is in the foreground (“Google Home” banner).
- Is there a way for us to determine which one is the “main” asset?
- Can we assume if there is a video, it is the “main” asset?
- Would there be cases where there is no video and multiple images?

## Conclusion

The proposed CSS override to support landscape ad assets in `amp-story-auto-ads` could improve user experience and ad display, with minimal changes for the end user. However, potential letterboxing and multiple ad asset issues need to be addressed. Further investigation is required to ensure seamless implementation for all ad vendors.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.