Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'iframe'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://www.nyadorned.com/la-appts-original hello! I have a widget used on a page for a booking software that allows clients to make an appointment. I have never been able to get it centered. can anyone help me figure this out? the iframe code is supplied to me by the software: <iframe src="https://newyorkadorned821laartsdistrict.resurva.com/book?embedded=true" name="resurva-frame" frameborder="0" width="450" height="450" style="max-width:100%"></iframe>
  2. Site URL: http://www.smifsc.com/podcast So I'm trying to use an Embed block on a Blog parent page to display the Apple Podcast player. Apple claims on their page "The player is responsive. Its width will automatically expand to fit mobile and desktop layouts." However that doesn't seem to be true on my page. I want the scroll bar to go away and for the div/container to adjust to the size of the embedded content. On mobile it cuts off very small and is unusable. It does the same on desktop but is more usable. I've tried a little code injection in the style sheet but nothing so far has worked. Can someone help this iframe work better on our site? Thank you in advance! The embed code is: <iframe src="https://embed.podcasts.apple.com/us/podcast/in-the-fields/id1588269214?itsct=podcast_box_player&amp;itscg=30200&amp;ls=1&amp;theme=auto" height="450px" frameborder="0" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation" allow="autoplay *; encrypted-media *;" style="width: 100%; max-width: 660px; overflow: hidden; border-radius: 10px; background: transparent;"></iframe>
  3. Site URL: https://www.ngoborders.org/blog All, I am using the mapplic map tool kit, and using iFrame to embed it on my client's site. The map directory/files are hosted on https://www.ngoborders.com/ngomap. The iFrame code which is embedded on the live site (https://www.ngoborders.org) is the following: <iframe src="https://www.ngoborders.com/ngomap/" height="650" style="width: 100%; border: none;"></iframe> The code works fine on desktop. It WORKED fine previously on mobile/tablet - but does not work now. I haven't made any changes. The map doesn't work on iPhone or iPad via Safari or Chrome. One thing I just noticed is that when I run Web Inspector on iPhone 13 Pro or my iPad Pro, I get the following: Failed to load resource: The certificate for this server is invalid. You might be connecting to a server that is pretending to be “www.ngoborders.com” which could put your confidential information at risk. https://www.ngoborders.com/ngomap I DON'T get this error when running Web Inspector on Desktop. So why am I getting this ONLY on mobile? I think that's why my map is being blocked on mobile. How can I fix this? The SSL Cert for ngoborders.com is valid... Squarespace displays the map OK in the design portal when you toggle the mobile or tablet display mode. Safari and Chrome on Desktop will show the iFrame if you resize the window to a mobile display. In Chrome's Web Inspector, if you switch it to mobile view, it also shows the iFrame. So, I think either something with iOS or maybe Squarespace? To recap: Desktop (macOS) - works OK Mobile (iPhone 13 Pro iOS 15.0.2) - Does not work Tablet (iPad Pro 11-inch iPadOS 15.0.2) - Does not work Any help would be really great, thank you!
  4. Site URL: https://www.dragonpeakpublishing.com So I'm having trouble getting my site to work through this link. I need this for some promotion that I'll be doing in a few weeks: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe I put in the following: <!DOCTYPE html><html><body><h1>Dragon Peak Publishing</h1><iframe src="https://www.dragonpeakpublishing.com" title="Dragon Peak Publishing"></iframe></body></html> But the preview page isn't working on that site. My understanding is that it's because iframes aren't working on my site. I'm incredibly new at managing a website so I'm not sure where to take it from here and my Googlefu has not gotten me any results that actually fixed things. Anyone have thoughts that they can share on how to get this fixed?
  5. I've tried everything in a code block with this code and it won't connect. We're also the source of the code <iframe src="https://switchback.parableconnect.com/indie-outdoor-locator" title="Indie Outdoor Map" width="1000" height="600" />
  6. Site URL: https://www.thorpe-hall.org/paypalbookingform I have a form built with google apps script: https://script.google.com/a/macros/thorpe-hall.org/s/AKfycbzSjpbW8moBJ75Q82NEux6ezDTbFAEtGIVki4i0PcelrbxjveletfyYtZ1ic9rQ_k-Szg/exec. I would like to display it in a code block as an iframe: eg: <iframe src="https://script.google.com/a/macros/thorpe-hall.org/s/AKfycbywQJsGAqumlhdBvw0AlYy6b2fFfqKy8cn8wgY0FYGCURQZApeVCnU2ZlxiUFyxKaTWAg/exec" > Loading ... </iframe> This displays ok on MS edge and on Chrome but does not display at all in Safari, at least v11. Interestingly, the parent div does display, just not the form. Also, I have another a form, this one created using google forms, and included in a code block as an iframe: <iframe src="https://docs.google.com/forms/d/e/1FAIpQLScBeUGhrtxNNqq4F0FS0dWPwwTFMNAr6llRu-p343dYoWjUcg/viewform?embedded=true" > </iframe> and this DOES display fine in all three browsers mentioned above. so it seems that my safari browser will display an iframe ok, but presumably only if it is setup ok. So my question is what needs to go into the header of my google apps script form to make it display ok.
  7. Site URL: https://opinionx.co I use iframes throughout our Squarespace site to embed interactive product demos, GIFs and videos. On our main landing page (https://opinionx.co), we use an autoplay video with a white background that is intended to blend into the overall site background. For some users, however, Squarespace seems to add a border to 2 of the 4 sides of the iframe. I've tried a few tricks (overflow, frame border) but nothing seems to get rid of it. 4th screenshot is of an embedded stack ranking survey, where the border should all be light grey but that 2 sided dark border pops up again (like on the video iframe). Anyone able to help?
  8. Site URL: https://projectinvent.org/ I've added a couple of custom code plugins to our donation page. The code loads without issue if I enter the URL directly into a browser (projectinvent.org/donate). However, if I navigate to the donation page through our heading navigation bar via the "DONATE" button, the widgets don't load (unless you hit refresh). Any help is much appreciated!
  9. Site URL: https://nicholas-brtn.squarespace.com/eko Hey all, Preface I am not a coder: Apologies if this has been asked before but I've been looking through the forum for a solution and was unable to find one. I am attempting to put a Figma prototype on my website via embed code. It looks fine on all sizes of desktop however mobile cuts off chunks of the media. Below is the code I'm using: <iframe style="border: none;" width="100%" height="1032" padding="0" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FgcuVfb0daa4ej6WjR4iq9C%2FEko-Test%3Fpage-id%3D9%253A152%26node-id%3D35%253A2817%26starting-point-node-id%3D35%253A2817" allowfullscreen></iframe> </div> <br /> <div class="Container-slim"> I've tried two main ways of correcting this issue with non success. First playing with different width/height dimensions & percentages. Second using custom CSS using: ##block-yui_3_17_2_1_1631001115305_51759 iframe { height: 100vh; } Also tried the same css adjusting width. Appreciate all the help so much, been spending countless cups of coffee on this.
  10. I launched a newly designed site using the Mojave template just last month and all iframe embedded coding was functional on the live site. For some reason today it works in my editing window but not in the live view. Is anyone having this issue? No changes to coding has been made. Wondering if it is perhaps a browser issue but I don't know how to repair it. The code is this and I've confirmed no changes to the account holder/client's idxhome account so the link inside the iframe is still operable. Also in editing mode I can see the results just fine but in live mode it's just blank. The website is markdelgado.com (I have iframe at the bottom of the home page and in a feature listings page accessible from the Buy Now page. Here is the code. Grateful for any insight! <iframe src="http://markdelgado.idxhome.com/openhomes/137534" width="100%" height="2700" frameborder="0" allowtransparency="true"> <p>Your browser does not support iframes.</p> </iframe>
  11. Site URL: https://seafoodpeople.squarespace.com/test I have inserted an iFrame, but I want the height to fit the content on the page, without having to scroll within the iframe window. The content changes from day to day, so the height would have to fit accordingly. I can manage the no scroll by adding: scrolling="no" to the code. But when changing the height to be height="100%", the height becomes short like 50 px high... so that is not working for me. Code inserted as an embed block: <iframe src="https://api.recman.no/i1.php?key=210903092954k6c0ac93e83d3c23cfe2fc33ee3dd6cd01021880892&language_id=1" width="100%" height="750" frameborder="0" allowfullscreen="allowfullscreen"></iframe> Is there an easy and simple solution to this?
  12. Site URL: https://www.acrossthecreekcabins.com/book-a-cabin Im trying to embed the little hotelier booking engine into a code block on one of the pages of my website but I have the issue where it reverts to the mobile version for the desktop and causes the embed to "grow" on the page. I need to know how to create the minimum width of the iframe to be 1024px. Here is the coding I have been using to embed the booking engine: <div class="ibe" data-region="emea" data-channelcode="acrossthecreekdirect" data-widget="embed"></div> I have also put this coding into the closing body tag: <script src="https://widget.siteminder.com/ibe.min.js"></script> The link to the page I am working on is here: www.acrossthecreekcabins.com/book-a-cabin
  13. Hi all, I'm working with a client, trying to track Google Ad conversions through Google Tag Manager (GTM) on a form (donation form) which is in an iFrame. The form is set up though provided embed code. GTM is set up and working on the site itself. No matter what I try, I can't get GTM to recognize anything in the form. I've tried adding the GTM code into the code block in various places (before the iFrame code, after, etc.). I've tried getting GTM to look for specific text or changes in the form (once the donation is complete), but I don't think that GTM is recognizing the form at all. On the backend, where the form is created, there's no option to add GTM or any tracking code. Hoping someone has some suggestions. Thanks in advance!!
  14. Site URL: https://www.highlandplanning.com We are trying to embed the blog section from our website (learning center) in our client's personal portal. That provider enables us to put a URL in a widget that will display the webpage content. The text comes through perfectly, but all the images do not even show up. My tech support told me that it seems to be an issue with iframes enabled or permission in SquareSpace. I say this because any other URL we put in the widget displays perfectly, images and all. Squarespace said they cannot help and directed me to this forum. Thanking you in advance, Reed P.S. We don't know code. Here is what we were told: "Tamarac is blocking or rewriting/filtering what is added to the website or Squarespace is not properly recognizing that the website is running in what's called "iFrame" and not properly displaying the website ( I noticed the links on the Highland Financial link actually showed Ed's Temporary URL instead of the full domain name: https://edward-leach-me94.squarespace.com http://static1.squarespace.com/static/59fa0413692ebe1686955d81/t/5ac7ec1370a6ad73a560225b/1523051542073/HorizontalLogo_HIG.png?format=1500w Highland Financial Advisors Highland Financial Advisors is a fee-only RIA headquartered in Wayne, NJ dedicated to helping you make informed decisions about your money. edward-leach-me94.squarespace.com ) For some of these advanced features, you may be best served by migrating the website to a CMS platform such as WordPress that do not do what SquareSpace does, since obviously, we do not have control of the Tamarac website.
  15. Site URL: https://marginalia-manuscripts.co.uk/draft-completion-calculator Hiya! I've been trying to embed a calculator on this page: https://marginalia-manuscripts.co.uk/draft-completion-calculator. As you can see, it looks fine on the desktop version. But when I check mobile, the embedded calculator gets cut off. I've tried a few fixes (such as increasing the height in pixels), with no luck. Can anyone help? Here's the current embed code: <iframe src="https://grid.is/embed/calculate-your-draft-completion-date-e5jByADSRIS1kkKZUIEkcA?s=eyJDYWxjdWxhdGUgQ29tcGxldGlvbiBEYXRlLTMueGxzeCI6eyJTaGVldDEiOnsiQzMiOjU3MDAsIkM0IjoxMDA1MDAsIkM1IjoyOTAsIkM2IjowLjgzM319fQ==&showControls=1" width="100%" height="1000" frameborder="0" data-document-id="7b98c1c8-00d2-4484-b592-429950812470"></iframe> <script type="text/javascript" src="https://grid.is/static/embed/v1/script.js"></script> Thanks in advance!
  16. Site URL: https://rangerclub.uk We are looking to embed ideally a custom Google map with multiple pinned locations within a single layer. This is easily done but uses JavaScript / iframe which isn't in our Square Space plan. Are there any other viable options? Google Maps does allow exporting to KML/KMZ.
  17. no idea what im doing...i need to add code for an i-frame page (uhm if im even using the right verbiage) so it is part of my site apparently i need to first upgrade my plan and then do code? Where do i put the code once i get it from the vendor??
  18. Site URL: https://www.SierraLakesRealEstateBrokerage.com Going to mess around with it a while longer. Just hoping one of you guy on this form have encountered this before when inserting a html code. This is how it looks like right now on my page. Cuts of more than 90% of the information.
  19. Site URL: http://www.taylornicoleportraits.com/availability I've been troubleshooting for hours and hours. I cant find any css or add any code to the iframe or anything to get rid of it. if I use the chrome inspect feature I can toggle the code that seems to be causing it, but none of the fixes i've seen in the forums google or anywhere fixes it. I just want the code block tall enough to fit all the content withOUT a scrollbar. it doesnt matter what height I set the iframe though, i literally set it to 1million pixels and that just makes a scrollbar that tall as well. here is what i've put in the code block: <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.14/iframeResizer.min.js"></script><iframe src="https://hello.dubsado.com:443/public/schedulerGroup/60fb1727a84ea303aaceed3a?isIframe=true" frameborder="0" style="width:0px; min-width:100%; min-height:500px"></iframe><script type="text/javascript">setTimeout(function(){iFrameResize({checkOrigin: false, heightCalculationMethod: "taggedElement"});}, 30)</script> help me remove this scrollbar please!
  20. Site URL: https://www.canfieldhousebnb.com/new-page Hi, I am trying to add a booking engine iframe into my site. However the top of the iframe is getting covered by the header. Any help is greatly appreciated. Thank you in advance. Ryan
  21. Site URL: https://www.cleanplate.co.nz/e-cookbook Hi There, I am working on a page for a client where we have embedded and externally hosted PDF Flip eBook into an iframe. I have noticed that while on desktop, everything looks fine, but on mobile, the ui controls gets trimmed off at either side in spite of the overall width of the iframe being set at 100%. The classes I want to target are (I think): .pdff-ui-wrapper .pdff-ui-controls with of width of 99% for mobile or suchlike But using the CSS editor within Squarespace, it doesn't recognize the classes as they are not 'native' to the project. Does anyone know of a quick fix for this or another way apart from how I have added the iframe? I have looked online and am a bit confused. Best regards.
  22. Site URL: https://www.armstronglloyd.co.uk/technology-marketing-salary-survey I wonder if someone could help me out please? I have a I-frame on the site for a survey using Google forms - https://www.armstronglloyd.co.uk/technology-marketing-salary-survey. I can not for the life of me work out how to get this I-frame responsive so it sits properly on mobile. I've tried a variety of different coding approaches and given up in frustration! If anyone could point me in the right direction I would be so grateful! Thanks, Kate
  23. Site URL: https://www.kevalahealth.com.au Hello everyone, Sorry if this question has been answered before as I have tried to follow instructions on here and its not working! QU: I'm trying to embed a youtube video onto my site so it can autoplay and not have other youtube videos follow on after mine! I've tried to use the formula from Kelli_carley in previous emails and its not working. See my attachment. QU: Do I save my video to a playlist first, then use that embed code and make the relevant changes as advised by Kelli ? See her attachment? I have tried both ways. Hope someone canhelp? Jodie 🙂🙂
  24. Site URL: https://www.scocp.org/calendar Our Google calendar iframe stopped working the other day for people not logged into Google. 1. I've verified that the "Make available to public" option is selected on the calendar settings page. 2. I've unchecked and re-checked the box to reset the setting on this option 3. I've deleted the code block on squarespace and updated the iframe code <DIV Class=responsiveCal> <iframe src="https://calendar.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23ffffff&amp;ctz=America%2FNew_York&amp;src=c3BvcnRzbWVuc2NjcEBnbWFpbC5jb20&amp;color=%233F51B5&amp;showTz=0&amp;showCalendars=0&amp;showTabs=0&amp;showPrint=1&amp;showDate=1&amp;showNav=1&amp;showTitle=0" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> </DIV> 4. CSS Code for class referenced above has remained unchanged for well over 2 years: .responsiveCal { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; } .responsiveCal iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } Nothing I do seems to fix the issue and I can't find any recent posts showing others having the same issue. I did notice that SquareSpace recently updated their editing interface (making it somewhat worse - but I digress) and figured maybe the two were related. Any suggestions? Thanks, Frank
  25. Site URL: https://cheetah-capybera-ewxp.squarespace.com/tvtest1 Hi, We are trying to add a page to our site that will host a large iframe. In the image attached, you can see that our iframe is within a div from Squarespace called sqs-block-content. This div is a limited size. We tried putting a inline style on our iframe in the code block of width 100vw, height 100vh. Nothing happens. Is there a way to override the code block default styling ?
  • Create New...