Responsive Iframe

[zoed36691445]

Hi All,

I am trying to embed a website (booksy.net) into my website it is a responsive site and so my issue is  I cant seem to get it to fit mobile size. I have googled it and it seems that there are mixed answers as to whether or not I can do this?

Would anyone be able to help? That would be most appreciated.

[Nancy OShea · Accepted solution]

Trust me.  You really don't want to use an iframe for this.  There's no shortage of problems involved and many of them you're not aware of yet. 

<iframe> - HTML | MDN

So just use a direct link to the other website.  You'll be so glad you did if that way .

[BenPleysier]

On this page, BoK | Meet the BunchOKids, I used to have two animations - now there is only one. Because of the JS, I had to place each animation in its own document and put them in an iframe in the main document. You will find the remaining animation at meet-bok.

On this site, I used Bootstrap 4, the documentation can be found at http://getbootstrap.com/docs/4.0/utilities/embed/, the source code of the embed.scss partial is

// Credit: Nicolas Gallagher and SUIT CSS.
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  &::before {
    display: block;
    content: "";
  }
  .embed-responsive-item,
  iframe,
  embed,
  object,
  video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}
.embed-responsive-21by9 {
  &::before {
    padding-top: percentage(9 / 21);
  }
}
.embed-responsive-16by9 {
  &::before {
    padding-top: percentage(9 / 16);
  }
}
.embed-responsive-4by3 {
  &::before {
    padding-top: percentage(3 / 4);
  }
}
.embed-responsive-1by1 {
  &::before {
    padding-top: percentage(1 / 1);
  }
}

As you can see from the website, the iframe is fully responsive.

Apology: The site has been under construction for far too long, fortunately I have a meeting with the client on Monday next.

[BenPleysier]

Forgot to say, that I had to make an adjustment for IOS as per

/* Animate iFrames to make responsive for IOS
-------------------------------------------------- */
iframe {
width: 10px !important;
min-width: 100%;
}

[Nancy OShea]

Correct me if I'm wrong, Ben.  Your animation resides on the same domain as the iframe, right?

Problems ensue when people try to use cross-origins in iframes -- outside URLs from facebook, wikipedia, etc... without permission granting apps or scripts.  

[BenPleysier]

OK, gotcha.

[zoed36691445]

That will be my last resort, are you aware of doing it a different way other than linking it straight to the website and iframes? This website is for a friend, i have said that it is more efficicient to link it straight through but would like to know if there was an alternative way of having it in the website rather than having to leave the website to go onto it.

Thanks again for all the help!

[Nancy OShea]

zoed36691445  wrote

That will be my last resort, are you aware of doing it a different way other than linking it straight to the website and iframes? This website is for a friend, i have said that it is more effiicient to link it straight through but would like to know if there was an alternative way of having it in the website rather than having to leave the website to go onto it.

Thanks again for all the help!

Sure.  You would need to contact the site  and ask them if they have an embeddable website app or widget you could use.   If they don't have one, a straight link is your best option.