When embedding a Story into an external platform, like an iFrame or Learning Management System (LMS), the content will automatically adapt to different screen sizes. Here’s how the presentation works across various devices and how you can control the display modes.
Desktop and mobile views
We Are Stories provide two main views: desktop and mobile. Each is optimized to ensure the best possible user experience, whether on a large screen or a mobile device.
• Desktop view: When the screen width is 1024px or larger, the Story will default to the desktop view.
• Mobile view: If the screen width is less than 1024px, the mobile view is automatically applied for easier readability. The mobile version includes larger text on captions and responses to enhance the reading experience on smaller screens.
In both cases, the Story maintains a fixed aspect ratio of 10:16. For the content to display in desktop view, the embedded frame needs to meet both the width requirement and a minimum height, ensuring the aspect ratio is preserved.
Fullscreen mode
If a user chooses to view the Story in fullscreen, it will always default to the desktop view, regardless of the screen width or device type. This ensures that the content is displayed optimally when taking advantage of the full screen.
Overriding the view mode
You have the option to override the automatic view settings with a query parameter in the URL. This is handy when you want to enforce a specific display mode in an embedded environment, no matter what device is being used.
• To force the desktop view, append the following query parameter to the Story URL:
?forceDisplayMode=desktop
• To force the mobile view, use this query parameter:
?forceDisplayMode=mobile
For example, the Story URL might look like this:
https://play.wearelearning.io/play/yourStoryID?forceDisplayMode=desktop
By including these parameters, you gain full control over how the Story is presented in embedded environments, ensuring a consistent experience for your users.
Need help? We're just a message away! Contact our support team at any time.