Integrating photospheres into your Squarespace website design

Attempting to incorporate photospheres into my Squarespace website has been a challenge.

The Google Maps option is functional, but it doesn't meet my specific requirements and appears like this:

<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sus!4v1471028758208!6m8!1m7!1sF%3A-hjcchX5MD5g%2FV03OAcggYUI%2FAAAAAAAAKeM%2FXwIrucnK4IQkwWbhxu9BrvOATMYZaMmKgCLIB!2m2!1d37.870246!2d-119.360704!3f125.91384035181916!4f6.045852307800146!5f0.7820865974627469" width="100%" height="800" frameborder="0" style="border:0" allowfullscreen></iframe>

Instead, I would like to use the sphereshere.net embed feature, which looks like this but unfortunately, it isn't functioning properly:

<iframe src="http://sphereshare.net/#!/e/c467ba7af9753ee287cd44550493e966" height="320" width="620" frameborder="0"></iframe>

What could be causing this issue?

htmlcssiframesquarespace

Answer №1

One common issue in situations like this is the conflict between using the http protocol within an iframe while you are logged into Squarespace via https. To troubleshoot, try accessing the page without being logged in and ensure you are viewing it using http instead of https. Feel free to share a link to the page for further investigation.

This dilemma stems from browser security measures. Loading content over http within an https parent site poses a potential security threat, leading most browsers to block such requests. Google Maps is compatible with https (as evidenced by the secure link used), unlike sphereshare.net which only supports http. Therefore, when you are logged into Squarespace and loading the website over https but the sphereshare iframe over http, browsers will restrict access.

In the future, if sphereshare enables support for https, this issue should no longer persist. For now, logging out and switching to http is necessary to view http-loaded iframes properly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a line break in an alert using PHP

<?php function alert($msg) { echo "<script type='text/javascript'>alert('$msg');</script>"; } if(array_key_exists('btnRegisterAdmins', $_POST)) { $fname = $_POST['FirstName']; $lname=$_POST['La ...

javascriptphpjqueryhtml

sending additional parameters within a URL query string

Is it even possible to include a URL with get parameters within another get parameter? For example, I'd like to pass http://example.com/return/?somevars=anothervar as the value for the "return" parameter as shown below: http://example.com/?param1=4&a ...

html

What is the simplest method for a beginner to transfer form data from HTML to an email?

Currently I am in the process of developing a compact website and looking to design an HTML form that can send values to my client's email address. The snippet of code for the form is as follows: <form id="contact-form" method=" ...

phphtml

Tips for positioning elements on an HTML page by utilizing CSS styling

I have a primary container with the following CSS: .major { width:30%; height:100%; position:absolute; } Now, I want to insert web information at the bottom part which includes: About | Terms | Policies | Contact Us This content will be within the .web ...

htmlcss

Error: The @use directive must come before any other rules in Angular

Error message: Issue: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): Error Details: HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js) ...

cssangulartypescriptsass

Define the width and height of images specifically for screens with a maximum device width using @media queries

Having some trouble with the sizing of images on mobile devices. Using the code below, but for some reason, the height remains at 13em on smartphones, despite setting it differently for other devices. Any ideas why this might be happening? @media only sc ...

htmlcssimagelayoutheight

Ways to eliminate the design from a previously selected list item

I'm working on creating a calendar that displays 3 booking times when a user clicks on a specific day. However, I am facing an issue where the styling (green color) remains on the selected day even if the user chooses a different day. Any assistance o ...

javascripthtmlcss

Seeking feedback: Creating unique HTML markup using PHP, with the option of adding tag prefixes

After working on a PHP class that enables the creation of custom HTML markup similar to FB Markup or EE tags, I am now contemplating enhancing it further. The current functionality is based on tag prefixes like this: <ctag:pagination per_page="20" tota ...

phphtmltags

Hiding the Previous or Next Button on the First and Last Item in a Twitter Bootstrap Carousel

Is there a way to hide the previous button on the first item and hide the right button when the carousel reaches the last item? I've tried different solutions but couldn't get it to work. Any help in understanding how to implement this for a Boot ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

Tips for organizing the data you have collected from the table

After successfully printing all the data from my database, I am facing a challenge in designing my data effectively. The table I am working with is called post_tbl and it has columns named post_id, post_message, and post_date. This is the query I am usin ...

phphtmlcss

Vertical tab design in Bootstrap does not automatically switch tabs

I'm managing two separate tab boxes that switch content when clicked or over a 5-second period. https://i.sstatic.net/Ujz9H.jpg https://i.sstatic.net/sFc1K.jpg The left box is functioning correctly, but the right box is changing the active state wit ...

javascriptjqueryhtmlcsstwitter-bootstrap

Struggling to align divs in HTML using CSS

Struggling with aligning my divs in the center of the parent div and keeping them inline. I have a parent "page" containing 6 other divs - "bg_01", "bg_02", "bg_03", "bg_04", "bg_05", "bg_06". They sit inline when the window is small, but when it's re ...

htmlcss

Troubleshooting the issue with dynamically adding form fields in AngularJS

I am currently working on an online course application and facing an issue with adding form fields dynamically to include additional video lectures for each course. When I attempt to click on the "Add Another URL" button, nothing happens. https://i.sstatic ...

javascriptangularjshtmlangularjs-directiveangularjs-scope

Ensure the footer remains at the bottom of the page even with changing

I am encountering an issue with positioning a footer under dynamic content displayed in a div named txtresults. The div is updated with HTML following a query made with an input value, as shown in this example on JsFiddle: JsFiddle Currently, I am struggl ...

jquerycssajaxfooter

Generate a document of purchase utilizing PHP POST array information

Currently studying PHP and delving into creating a basic cart/processing script. The item cart has been successfully developed, however, facing challenges in displaying information on the receipt once the user confirms purchasing the item(s) in their cart ...

phphtmlarrays

When you click on the logo, it will automatically redirect you to a designated Bootstrap Tab and set that tab

After searching through numerous posts, I am still struggling to find a solution to my straightforward issue. My requirement is simple: when a user clicks on the brand (logo), it should not only redirect them to a specific tab but also make it appear as a ...

jquerycsstwitter-bootstraptabs

Tips for managing credentials and cookies across multiple websites

I have a vision of creating a website similar to Stack Overflow, complete with individual blog pages and applications for each member, all using MVC 3. I want to combine various features from different websites into one cohesive platform. How can I achie ...

htmlasp.net-mvc-3credentials

Tips on sorting content by tag instead of by heading

Hello, I am new to programming and seeking some advice regarding a piece of code that I am trying to understand and fix in hubSpot. My goal is to modify the code so that it can search blog posts based on tags rather than just the title. Any guidance or t ...

javascripthtmlsearchfilterhubspot

Comparison of button text alignment: stacking vs inline placement

I currently have a button on my webpage labeled "Learn More." Unfortunately, the text on the button is not lining up as it should. Instead of flowing in a line, the text seems to be stacking on top of each other. The HTML code for the button is included ...

htmlcsstwitter-bootstrap

CSS does not alter the properties of a link's "background-color" or "border-color"

I have successfully changed the text color of visited links, but I am struggling to change the "background-color" and "border-color" properties. The initial part of my internal style sheet includes a CSS reset. a:visited { color: red; background-col ...

htmlcsscolorshyperlink