Web Story not displaying using embed code displaying multiple console errors

Description

@gmajoulet creating this new issue as suggested.

We have a new report in the Web Stories support forums which you can find here: https://wordpress.org/support/topic/webstories-not-displaying-in-sidebar-via-shortcode/#post-15350186.

The user is trying to add the Web Stories embed code to the ‘sidebar’ of their page. The story isn’t displaying on the page and I can see the following console errors on the page.

Uncaught Error: Render timeout waiting for service amp-story-render to be ready & Uncaught (in promise) Error: No messaging channel: initMessagingChannel timeout

Suggested that the user try using this embed code: [web_stories_embed url="https://nonfungibleownership.com/web-stories/theta-review/" title="theta-review" poster="https://nonfungibleownership.com/wp-content/uploads/THETA-3-poster-640x853.png" width="360" height="600" align="none"]

This embed code did not work and no story is displayed on their page.

Reproduction Steps

1. User added embed code provided above to their page.
2. Publish page.
3. View page and no web story displayed.

Relevant Logs

No response

Browser(s) Affected

No response

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

No response

[edoudou]

Ok thanks, it seems to be working

[gmajoulet]

Thank you for sharing a repro link! I’m not sure who’s responsible for this CSS, but the <amp-story-player has a display: none; that prevents it from being visible. It looks like it’d get revealed with a .entered class, that never gets added. Removing the display: none; correctly displays the story, so I believe it’s just a CSS issue, independent from our implementation.

Hope it helps!