Flex allows you to embed third-party content such as YouTube Videos, Google Maps, and forms. Once embedded, you can set how you would like the content to scale as the experience is responsively resized.
Embedding Content
Navigate to the Toolbar
Select the Embed Tool
Draw an embed frame on the canvas
Paste the content's embed code in the Embed field on the Inspector Panel
Ensure "Fit to Frame" is toggled on if you would like the embedded content to perfectly fit the dimensions of the embed frame on the canvas
Note: If the content embed code includes fixed dimensions (not responsive) and it is larger than the embed frame on the canvas, the content may appear to be cut off rather than scaled to the frame
Select View above the Inspector Panel to preview the experience and the embedded content
Ensuring Responsiveness with Embedded Content
Embedded content on the canvas may not scale appropriately between variants if not set up correctly. Below are considerations to ensure your embedded content scales responsively:
Use responsive embed codes: If the third-party embed code you are using has fixed dimensions (width and height), it won't scale as the embed frame responsively scales to different screen widths. Instead, the embedded frame itself will scale responsively, but the embedded content will not, causing it to be cut off.
Use Relevant Sizing: Relevant sizing refers to content sizing by a percentage of the canvas's overall width or height, rather than a fixed size based on pixels. For example, if an embed frame's width is set to 75% of the canvas's width on desktop, it will also hold the same percentage on tablet or mobile. In contrast, if the embed frame's width was set to a fixed 1280px but the mobile variant's canvas was only 800px, the frame would not fit on the canvas.
Breakpoint overrides: If a responsive embed code is unobtainable for the third-party content, you can override the experience's breakpoints and manually set the embed frame size per variant. Doing so will cause the embed frame to "snap" to the set size when the experience hits the set breakpoints for the corresponding variant.