Responsive Iframes

Ensures that your embedded pages stays responsive.

IFrames are commonly used on IdrottOnline to allow embedding of pages hosted in other applications.

In an IdrottOnline application all page components must be responsive. There are multiple ways of making an IFrame responsive. Some responsive IFrame use-cases can be solved with simple JavaScript and CSS, but included in IOUI library targets a challenging use-case in which embedded content:

  • Can have unknown width and height
  • Can have unknown width/height ratio
  • Can change its width or height as users interact with dynamic content and we want the size of the IFrame to change accordingly to avoid scrollbars.

Getting Started

Due to browser security constraints, you will have to include the IOUI library both in the “parent” page, as well as in the page being embedded through an iframe (“child”).

Ensure you set the ioui-responsive-iframe class on you iframe, and no other attributes should be defined.

<!-- Make your iframe responsive -->
<iframe class="ioui-responsive-iframe" src="/extras/iframe-example"></iframe>

<!-- Activate responsiveness in the "child" "/extras/iframe-example" page -->
@IOUI.CDN.Bundles.Scripts()
<script>
  var ri = responsiveIframe();
  ri.allowResponsiveEmbedding();
</script>
         

Demo Time!

Bacon ipsum dolor sit amet ea et pork chop aliquip, bacon do eu duis kielbasa consectetur meatball jerky short ribs. In bresaola ham hock leberkas shankle sirloin est cillum ea, exercitation pancetta velit consectetur tri-tip. Ham nisi turducken swine. Ut ground round officia, ea tail capicola adipisicing ut anim tempor ham hock exercitation rump eu. Veniam ea capicola proident beef ut pork chop chuck laborum chicken turducken reprehenderit pancetta incididunt occaecat. Excepteur do non nisi mollit short loin consectetur turkey est ham hock deserunt sed veniam aliquip.

Short loin pork occaecat, officia sirloin ut mollit ut. Sint pig turkey cupidatat, sed bacon shankle hamburger strip steak tail spare ribs pork belly turducken. Nostrud est laboris swine, tempor reprehenderit et do beef ribs brisket. Pig pork belly esse pork chop.

Nulla chuck et deserunt in pork chop reprehenderit pancetta officia sirloin prosciutto t-bone mollit. Eu drumstick qui sint meatball pork belly, jowl brisket laboris. Jerky pastrami salami deserunt ea, pariatur brisket magna adipisicing ribeye. Deserunt eu anim tail swine pastrami boudin dolore fatback beef ribs nulla. Brisket in pork belly officia nostrud ea anim. Meatloaf hamburger in, sunt strip steak rump ex shoulder ut nulla laboris.

Eiusmod hamburger id chuck. Culpa consectetur laborum minim. Dolore jowl ham hock duis magna voluptate. Venison ut elit, pariatur biltong mollit meatloaf excepteur minim tri-tip cow pastrami. Tri-tip flank aliqua capicola consectetur est ribeye turkey in officia ex anim. Ham shankle voluptate, ut in fatback dolore.

Andouille deserunt adipisicing reprehenderit. Dolor corned beef incididunt cillum reprehenderit cupidatat deserunt ham hock meatball. Quis cow swine, tenderloin shank deserunt eiusmod aliquip ex id. Chuck in hamburger beef ribs beef dolore pastrami, cillum occaecat ex filet mignon pancetta rump pig do.

Magna andouille et ex aliqua mollit spare ribs t-bone. Consequat esse biltong, duis occaecat jerky nisi dolor. Fatback duis pork belly capicola. Pariatur beef occaecat nostrud voluptate id. Aliqua veniam sausage minim.

Excepteur meatball culpa ham sed, pig ex veniam proident tempor rump. Ad incididunt fatback tail eu t-bone short ribs aliquip, enim shoulder bresaola drumstick short loin mollit ground round. Short ribs kielbasa voluptate chicken swine tenderloin ut in ea pork belly jowl. Officia frankfurter quis dolore shoulder jerky.

Tongue est dolore qui reprehenderit flank quis, officia meatball ground round pastrami sint esse magna mollit. Commodo ex eu proident fatback. Drumstick beef ribs est nulla dolor. Sirloin eiusmod quis bresaola, voluptate ad reprehenderit laborum fugiat capicola pork beef ribs. Duis nulla sunt fugiat capicola dolore ea occaecat ball tip laborum qui cillum culpa consequat. Mollit meatball drumstick ball tip shoulder turkey exercitation nisi pork belly sint brisket sirloin. Ullamco ut pancetta rump laborum shankle.