How can I enable scrolling on my Webflow site when using an I frame as the cover image, specifically for Safari on iPad?

To enable scrolling on your Webflow site when using an iframe as the cover image, specifically for Safari on iPad, you can follow these steps:

1. Add a section to your Webflow site where you want the iframe to be placed. Make sure the section has sufficient height to accommodate the iframe content.

2. Drag and drop an Embed element into the section. You can find this element in the Elements panel on the left-hand side.

3. Obtain the embed code for the iframe you want to use. This code is usually provided by the service or platform where your iframe content is hosted. For example, if you're embedding a YouTube video, you can find the embed code by clicking the Share button beneath the video.

4. Paste the embed code into the Embed element in Webflow.

5. Select the Embed element, and in the Styles panel on the right-hand side, set the position attribute to Relative. This ensures that the element will respect the document flow and can be scrolled if necessary.

6. In the same Styles panel, scroll down to Overflow and set it to Auto. This allows the content inside the Embed element to be scrollable if it exceeds the element's height.

7. Preview your site in Webflow or publish it to see the changes. You should now be able to scroll through the iframe content on Safari for iPad.

Keep in mind that the availability of scrolling within an iframe may depend on security restrictions enforced by the website you are embedding. Some websites may prevent scrolling or only allow scrolling within specific dimensions.

Additionally, Safari on iPad has its own scrolling behavior for iframes, and it may override custom styling or behavior in certain cases. So, it's essential to thoroughly test your Webflow site on Safari for iPad to ensure the desired scrolling behavior is achieved.