Setting height and width of iframe

[Ruchika4]

Hi team, in CC we have a requirement where we want iframe to be full width if browser width is less than 1200px. Something like below

@media (max-width: 1200px) {
  width: 100vw;
  height: 100vh
  }

Currently iframe is opening very small in mobile view. Here is the jira ticket for the issue: https://jira.corp.adobe.com/browse/MWPW-133983
We are not able to add style to iframe through authoring. We did tried adding modal metadata and adding a css class there
fragment Url here . However that only increase the size of modal and content that is in iframe doesn't cover the whole modal. Hence we need to set height and width for iframe too.

Following is how we want iframe to show up in full width

I wanted to check if this change in iframe css file will impact negatively other teams using iframe. And if this is something which will need to be discussed with design team.

Please let us know if there is any other way too for opening an iframe in 100% width and height which I might not be aware. I was thinking of adding something like modal metadata for iframe too where we can set style. Please let us know if that sounds a better approach.

Test page where this modal need to open: https://www.stage.adobe.com/creativecloud/animation/discover1.html (Click on start free trial button to open the pop up in mobile view to see the issue)

cc @dstrong23 @chrischrischris @auniverseaway @sharath-kannan @raga-adbe-gh @rgclayton

[Axelcureno]

IMO I don't see a problem with using media queries for styling the iframe as full page but it might be a good idea to consider leaving some margin space to let the user know it is a modal what's being displayed rather than a page redirection. By taking all the viewport space it may create some confusion for the user. BTW, regarding the responsiveness of this content, Myroslava Fedas is currently working on that part in case you need more info on that.

[Ruchika4]

We wanted to open the iframe in full page to replicate the behavior we see right now on prod here https://www.adobe.com/creativecloud/animation/discover.html

[Ruchika4]

Thanks for your answer @Axelcureno . Could you please share the ticket for making iframe responsive that has been worked on by Myroslava.

[JasonHowellSlavin]

Hi @Ruchika4 , could you share the page that utilized the fragment referenced above (animate.docx)? Are you saying that when you added the class to the modal, the selector .commerce-frame iframe did not adjust the iframe height/width?

We use iframes in some areas on bacom, and there are places where the width and height being 100% on mobile might not be the desired experience, but I can double check some of these.

[Ruchika4]

Hi @JasonHowellSlavin this is the page https://www.stage.adobe.com/creativecloud/animation/discover1.html that uses that fragment. I cannot share the url where you can directly see the changes we did in css for modal. We tried the css changes directly in browser. As because of cors error the url in iframe doesn't open on hlx.page or hlx.live
commerce-frame css class is getting applied to dialog modal only and not to iframe. Let me know an I can connect with you over call also to show and see if I am missing something.

[Ruchika4]

Thanks all for your feedback. We went ahead and applied height and width to a iframe based on a css class as per our requirement in CC. So that no impact on any existing page for any milo consuming team.