Andrey Mikhalchuk

Hi cliang,

I believe you can achieve what you are looking for with the FoV (field of view) parameter. Effectively, when you’re zooming in, you are just reducing the FoV, if you consider how regular lens work. Please try reducing the FoV and let me know if this will differ from your expectations.

On another note, most 360 cameras have relatively low resolution, around 5K or even less. So zooming in will likely make your image look worse, unless you have a very high res camera.

Also, as you’re adjusting the FoV, also consider adjusting the size of the view port, especially the height of the block. This will make the image look better at the edges.

Regards,
Andrey

Hi Eduardo,

Sorry, not in this version. I may be able to add some basic support for links in the future, but it’s unlikely that this specific plugin will become a fully-featured tool for real estate presentations. There are other plugins on the market providing such functionality for a fee though.

Regards,
Andrey

Yay, it seems to be working now!
Happy to be helpful and glad that you liked the plugin, Felix.

Regards,
Andrey

PS. That’s a beautiful photo, I’m adding this place top my bucket list ??

• This reply was modified 2 years, 8 months ago by Andrey Mikhalchuk.

Hi Felix,

Thank you for including the link, it was very helpful.

I opened the page and checked the dev console in Chrome. Your page’s javascript code fails with the following error:
“(index):65 Uncaught TypeError: Cannot read properties of null (reading ‘parentNode’) at (index):65:13″

This error refers to the following code (which is not a part of 360 View plugin):
<script consent-skip-blocker=”1″ data-skip-lazy-load=”js-extra”>
var element = document.getElementById(“maps-diamant”);
element.parentNode.removeChild(element);
</script>

Since there is no element with id #maps-diamant on that page, the javascript fails and stops working on your entire page, including the plugin code. So you don’t see the 360 image not because of a problem with the plugin, but because you have a problem with that missing #maps-diamant and the code that doesn’t properly handle this situation.

Please address that problem and let me know if you still can’t see the 360 image and I’ll take another look.

Regards,
Andrey

Hi scopika,

Thank you, glad you liked it ??

Unfortunately in the current version (v1.1.0) the video looping is hardcoded to “yes”. I added this feature request to the backlog and will make this parameter configurable in the next version.

Regards,
Andrey

Hello partisan01,

I checked the output in the browser dev console and it seems like there is a problem in either the theme itself or with some conflicting plugins loaded on the page. More specifically, there is this error in the console: “Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘j’)”. The error seems to be in the google maps code and most likely caused by loading google maps api twice on this page. If you take a look at the page source you will see these two lines in different parts of the page:
<script async defer src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyAzfEh8Mqinujs2wPRcdzeeFBlpLvQMTvg&callback=initMap”type=”text/javascript”></script&gt;
…
<script type=’text/javascript’ src=’https://maps.googleapis.com/maps/api/js?key=AIzaSyAzfEh8Mqinujs2wPRcdzeeFBlpLvQMTvg&ver=5.8.1&#8242; id=’archi-maps-js-js’></script>

My guess would be that after this exception is thrown, most Javascript stop working on the page and this is why the code that allows using the gyroscope doesn’t work as well. I cannot guarantee that this is the only problem (there are a lot of other problems reported in the dev console), but I would recommend fixing this problem first. Please let me know if the gyroscope won’t be working after all problems listed in the dev console are fixed.

Regards,
Andrey

Hello predent,

Yes, you correctly identified the problem, the issue is with the CORS settings of Google Drive. Google Drive doesn’t allow using images stored on GD to be used like this. The easiest way to fix the problem is to upload the image to your WordPress media library and use it from there. Alternatively, you can host it on some other server where you control CORS policies and set the CORS polity to allow embedding the image on your WordPress site. You can find more information about CORS on the plugin documentation page: https://andrey.mikhalchuk.com/360-view-wordpress-plugin

BTW, your image URL ends with &export=download, so you’re trying to embed not the image itself, but rather it’s downloadable export. I’d recommend removing that part of the URL. This will make your page with to load faster, through it won’t solve the issue with CORS config, only Google can do it and they won’t for security reasons: https://stackoverflow.com/questions/24026016/google-drive-cors

Regards,
Andrey

Hi momoanany,

Thanks for sending the test page, this helped a lot and I was able to reproduce the issue on your test page.

The problem appears to be not in the plugin. I created a temporary test page with the same video on my site and it works in the cardboard mode on my phone running iOS 14.6 just fine (I’m also running 360 View v1.1.0). Please take a look here: https://andrey.mikhalchuk.com/2021/06/02/blerl-test.html. The page is password-protected, the password is “testblerl”without the quotation marks. I also have bunch of test videos and images on the following page and they also work fine in the cardboard mode: https://andrey.mikhalchuk.com/2020/07/09/using-360-degree-photos-in-wordpress.html

The problem seems to be with your web server configuration. Here is how to see the problem:
– open Chrome (desktop Chrome is fine, no need to use the mobile version since this is a server-side problem)
– open the Developer console
– go to the Network tab
– go to your test page: https://blerl.com/test/
– in the Network log you will find line “converted.mp4” with Status “(canceled)” followed by “converted.mp4” that downloads the entire file at once. This is not how the web server is supposed to respond. You can compare this log with the response from the test page on my server I posted above. It “streams” the file with a series of chunks with 206 response and has no canceled responses.

Unfortunately I do not know why this server response affects only the cardboard view, but this is the only difference I found between your test page and mine.

The file has issues too, BTW. I tried to open it with a standalone media player IINA and it was able to play it but reported a problem with subtitles: “Unsupported external subtitle”. I would recommend to re-transcode the media file too, though, since the same file works from my server, the issue is likely not in the file.

Please let me know if you will still see the problem after fixing the web server and re-transcoding the file.
Also please let me know once you checked the test page I created and I’ll delete it including the test video you posted.

I would not recommend using v1.0.1, it has a critical bug that breaks pages under certain versions of WordPress and lacks some features. But if you’re 100% positive that you want it, you can check it out from the development git repository here: https://github.com/rtfms/360-view/commit/8e2e7aa3823a75e658640682f1b267fe9155a360

Regards,
Andrey

Hi chrismechanic,

I just released v1.1.0 and added Gutenberg Block mode (you can also check out the new documentation addressing, among other things, the issue you raised: https://andrey.mikhalchuk.com/360-view-wordpress-plugin). Gutenberg Block mode provides a much easier to use visual page builder for 360 View and I added safeguards to address the issue to the code as well.

Regards,
Andrey

Toni, all,

The documentation has been updated and moved here: https://andrey.mikhalchuk.com/360-view-wordpress-plugin. With the release of the latest v1.1.0 too many new features were added, so the user guide no longer fits the WordPress standard details page.

I hope that the new Gutenberg Block mode will help to eliminate problems reported in this thread (wrong quotation marks), but please let me know if you will experience any other issues. Also, per Toni’s suggestion, I documented the quotation mark issue in the user’s guide. Appreciate everyone’s help in debugging this problem!

Regards,
Andrey

Hi ketil,

I just released the new version (v1.1.0), tested the plugin with Elementor and it seems to be working fine. You just need to use the Shortcode Block from Elementor and paste the 360-view shortcode into it.
To answer your broader question, I also updated and expanded the documentation for the plugin, you can find it here: https://andrey.mikhalchuk.com/360-view-wordpress-plugin.

Regards,
Andrey

Hi Toni,

Glad it worked! I checked the description and, you’re right, it has the wrong quotation marks. Most likely they were introduced by MS Word when I was copying the text back and forth. Thank you for finding this, I’ll fix it in the next version.

Also appreciate your 5-star rating and the comment, glad this plugin was useful for your project. I’m going to release the new version soon, you may like its new features too.

Regards,
Andrey

Hi Toni!

Thanks for the link. It seems like there is a unicode character “\u201c” instead of a plain quotation mark in your shortcode. So when the plugin tries to load the image it uses this URL: “\u201c..\/wp-content\/uploads\/Kirche-360-vorne-2021-04-scaled.jpg\u201c”
Unicode character “\u201c” looks very much like a quotation mark (“), but it’s a different character. Please check your shortcode and replace all quotation mark lookalikes with the real quotation marks.
If this won’t help, please copypaste your entire shortcode in this thread, and I’ll take another look.

Good luck!
Andrey

Hi Toni,

Could you please post the link to the page where you’re experiencing the problem?

Regards,
Andrey

Hi jordimopi,

Thank you for sending the video, it is a very nice video and it definitely helped to understand the problem. Unfortunately this plugin only works with equirectangular 360 photos and videos. You get ones from cameras like Insta 360 One, GoPro Max or similar. The video you captured will require additional processing to convert it into equirectangular.

One approach I can recommend is to take the photos you have in the video, scan them and then stitch into an equirectangular version of a photo sphere (this will give you a better resolution as well).I haven’t done this myself, but I’ve heard that Photoshop added support for this operation back in 2018. Then you can use this plugin to view the resulting equirectangular image. Making it into a video is a more complex process, but I’m adding support for automatic orbiting in the next version, so it rotate the image for you and, hopefully, will help to achieve the effect you are looking for.

Regards,
Andrey