Embed Virtual Tour on Website – HTML & CSS – SitePoint Forums

Hello,

I made a virtual tour that I exported and saved in my dropbox to have a link. The virtual tour consists of a folder with html code and different images inside. I want to upload it to my website. I watched some tutorials that talk about the embed link, other tutorials that say with dropbox you have to change the virtual tour link by adding dl.dropboxusercontent.com or change dl=0 to raw=1, but I can’t do it, because I don’t know much about it.

Has anyone done this before or knows more than me? I think it’s not complicated because I tried with a virtual tour from a website, and it worked (but it was in .js while mine is in .html)

thank you for your help

As of October 3, 2016, Dropbox discontinued the ability to render Dropbox content in a browser via links.

You need to upload everything to your server.

But on my website I also have carousels where the images are saved in my dropbox and they are displayed correctly on the website.

Hello, thank you for your answer, when I publish my virtual tour in format to download it on the web, I have a folder which contains files appearing on this image: https://www.cjoint.com/c/LElp6jXF1yR

The link of my virtual tour on box: https://www.dropbox.com/s/gn7l60lnvdyjh7j/index.htm?dl=0

I tried uploading it to my website with this code:

‹video width="1200" height="720" controls> ‹source src="https://dl.dropboxusercontent.com/s/ gn7l60lnvdyjh7j/index.htm?raw=1"> frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreenallow="autoplay

It does not work.

I tried the virtual tour example on this site: https://www.cloudpano.com/

The visit has this link:

And it works on my site. I understand the second is javascript and the first is html.

But how can I code the HTML on my website?

Thanks

Is there a reason you can’t host the tour HTML on your site’s server?

I don’t know, my site is on wix, for my carousels I used dropbox so I thought I would do the same. I don’t know if I can and how to upload my virtual tour folder on the wix server

I have no experience with Wix, but surely there must be a setup to host resources.

Ok and do you know how to code the html display? I also tried with iframe but it doesn’t show on my website. Should we code a java script that launches the display of html?

Do you need to be in a frame or do you want to see the tour as a standalone “page”?
As a page, you would simply link to the location of the visit HTML, like any other page.
To integrate it, I would assume a iframe to work, although sizing may be an issue.

I wouldn’t think video was an appropriate item, unless it was actually a video.

When I try this code:

it opens a window for where I want to save the html file (but that’s not what I want). If I change the dl=0 to raw=1 at the end of the source link, it’s the same.

I tried this code with iframe

But it says 404 not found.

So does anyone know how to do this?

My understanding is that Dropbox no longer allows you to render HTML from Dropbox to a browser (directly or in an iframe).

Anyway, from what I can understand, the relative addresses of the .js and .jpg files in your .htm file are not correct.

Putting this URL directly into the browser also displays 404.

That would explain it. So the answer is to ditch Dropbox and find another way to host your resources.

If I put this URL in a browser, I can download the HTML:
https://www.dl.dropboxusercontent.com/s/gn7l60lnvdyjh7j/index.htm

I think Dropbox started preventing HTML rendering in 2016 because too many people were using Dropbox as a free hosting.

Looking at the html, I understand that the images and the java script are misnamed. I have to change the href by the image links.

For rendering html, I have a carousel where images are saved to my dropbox and rendering is done correctly, html link:
LErbcI8ctVR_Carousel-SliderBeforeAfter720P.html

Just in case, do you know of another host that allows html rendering?

Edit: I changed the path to the images and the .js and .css scripts in the html file. When I open my html file with a code editor, if I click on an image link, it opens correctly in my web browser. But when I want to launch the html, it stays on, please wait… Here is the modified html file: https://www.cjoint.com/c/LErbyLysmeR

It works because the HTML file is not in Dropbox.

I uploaded the carousel to my dropbox (with all images and scripts) with this link: https://www.dropbox.com/s/dys5udse69c8epw/Carousel_SliderBeforeAfter720P.html?dl=0

html works

Edit, it works because I am connected to dropbow I think… So do you know a host that allows html rendering? Something like google cloud?

Yes, that’s what I see with this link:

(screenshot resized to 50%)

Any regular hosting will render HTML, but I have a feeling you are looking for free hosting.

Free hosting is available from a number of websites. I have free hosting at AwardSpace and InfinityFree, but when I access web pages my antivirus gives phishing warnings. Also, emails from form submissions are not forwarded. My guess is that both of these limitations are due to spammers trying to use the free hosting. On AwardSpace, your carousel currently works here: http://create.mywebcommunity.org/honogan.html. (note this is not on the World Wide Web). A friend uses Google Sites for free for a sports club website with awesome features, but I don’t think it lets you upload your own HTML content.

There have been a number of threads in this forum about using AWS, for example: How to Create a Free CDN, Content Delivery Network Account – #5 by John_Betong. I haven’t researched this or used Google Cloud.

Thanks for the info, I think I’m starting to understand a bit better. I noticed that for the carousel on my wix site, I directly inserted an html code on my page with the carousel code that fetches the images from my dropbox. I think that’s why it works, I’m not rendering an html file, I’m just getting the images.

For my virtual tour I tried to do the same thing. I looked in the html for all the files called images, scripts .js and fonts.css.

1. I modified the font.css file which called the fonts, I put the dropbox links of the fonts.
2. I modified the html file by putting the link of all the files called (the images, the .js and .css).
3. I integrated on my wix site a box to put an html link. When I look at the preview it just says please wait.

So here, the html rendering is on my site, and the code will fetch the images and files stored on my dropbox (like for the carousel). But my render is not displaying correctly so two hypotheses (1) the files are not downloading from dropbox (which is weird as it works for carousel) or (2) there is a problem in my html code while I took care to change everything so called. A last solution might be to find another cloud to just save the files (because my site is already hosted at wix, I just need a good link of the files).

The html link (in .txt): https://www.cjoint.com/c/LEsbauFZieR

Screenshot of the html box on my Wix site

From your Wix screenshot, it looks like you can add a code fragment go to a