Highlighted

Responsive Iframe

New Here ,
Nov 17, 2017

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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 .

Views

776

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Responsive Iframe

New Here ,
Nov 17, 2017

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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 .

Views

777

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 17, 2017 0
Adobe Community Professional ,
Nov 17, 2017

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2017 1
Adobe Community Professional ,
Nov 17, 2017

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2017 1
Adobe Community Professional ,
Nov 17, 2017

Copy link to clipboard

Copied

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%;

}


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2017 0
Adobe Community Professional ,
Nov 17, 2017

Copy link to clipboard

Copied

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.  

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2017 1
Adobe Community Professional ,
Nov 17, 2017

Copy link to clipboard

Copied

OK, gotcha.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2017 0
New Here ,
Nov 17, 2017

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2017 0
Adobe Community Professional ,
Nov 18, 2017

Copy link to clipboard

Copied

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.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 18, 2017 0