Skip to main content
zoed36691445
zoed36691445
Participant
November 17, 2017
Answered

Responsive Iframe

  • November 17, 2017
  • 1 reply
  • 1858 views

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.

This topic has been closed for replies.
Correct answer Nancy OShea

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 .

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
November 17, 2017

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 .

Nancy O'Shea— Product User & Community Expert
BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
November 17, 2017

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.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
November 17, 2017

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%;
}
Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices