How can we help you?

Documentatie

View Categories

WP VR Troubleshooting Guide: Embedding 360 Tours on External Platforms

Are you trying to embed your WP VR 360° virtual tour on an external website or advertising platform (like Facebook, Google Ads, real estate portals, or third-party sites) and running into errors? Common problems include the tour not displaying, a blank iframe, or browser errors such as “Refused to connect” or “X-Frame-Options: SAMEORIGIN”.

This comprehensive guide explains the cause and provides proven solutions to successfully embed WP VR tours externally on other domains.

WP VR by RexTheme is one of the best WordPress plugins for creating immersive 360-degree panorama virtual tours – but default security settings can block iframe embedding on external sites.

The Problem: Why WP VR Tours Won’t Embed on External Platforms #

When embedding a 360 tour from your WordPress site on an external platform, you may see errors like:

  • The link is not recognized or doesn’t display properly.
  • “Refused to connect” in the browser console.
  • “X-Frame-Options: SAMEORIGIN” header blocking the iframe.

The Cause: Security Headers Blocking iframe Embedding #

The issue typically arises because of browser security headers set by your WordPress site, theme, security plugin, or server:

  • X-Frame-Options (older standard)
  • Content-Security-Policy (CSP) with frame-ancestors

These headers prevent clickjacking attacks by restricting where your page can be embedded in an iframe. By default, many WordPress setups use SAMEORIGIN, meaning the page can only be iframed on the same domain.

Solutions: How to Allow External Embedding of WP VR Tours #

Choose the method that best fits your technical comfort level. Always backup your site before editing files.

Solution 1: Enable Embedding for Specific Domains via functions.php #

You can allow embedding only on specific external platforms by adding custom code to your WordPress theme’s functions.php file.

Steps:

  1. Open your theme’s functions.php file.
  2. Replace:
    YOUR_PAGE_ID with the ID or slug of the specific page
    https://example-platform.com with the URL of the external platform.
  3. Add the following code:
function allow_iframe_for_specific_domains() {
    if (is_page('YOUR_PAGE_ID')) { 
        header('Content-Security-Policy: frame-ancestors \'self\' https://example-platform.com;');
    }
}
add_action('send_headers', 'allow_iframe_for_specific_domains');

Solution 2: Use a Content-Security-Policy Header #

Modern browsers recommend Content-Security-Policy (CSP) over X-Frame-Options. You can add a CSP header to allow embedding on specific domains.

Add CSP Header in functions.php:

function add_content_security_policy() {
    if (is_page('12029')) { // Replace '12029' with the specific page ID or condition.
        header("Content-Security-Policy: frame-ancestors 'self' https://your-platform-domain.com;");
    }
}
add_action('send_headers', 'add_content_security_policy');

Solution 3: Modify the .htaccess File #

If you have server access and want to adjust the headers site-wide, edit the .htaccess file.

Steps:

  1. Access your WordPress root directory and open the .htaccess file.
  2. Add this snippet:
<IfModule mod_headers.c>
<FilesMatch ".*">
    Header set Content-Security-Policy "frame-ancestors 'self' https://your-platform-domain.com;"
</FilesMatch>
</IfModule>

3. Save the changes and reload your site.

** Use frame-ancestors ‘none’; or SAMEORIGIN for other pages if you want to restrict embedding site-wide except for specific pages.

Solution 4: Use a Plugin to Manage Security Headers #

For a code-free approach, you can use a plugin to configure security headers. Some recommended plugins include:

Configure the plugin to add:

These plugins simplify header management and ensure compatibility.

Solution 5: Contact Your Hosting Provider #

If you’re unable to modify the files or install plugins, contact your hosting provider. Request them to:

  • Adjust the X-Frame-Options or Content-Security-Policy headers to allow embedding from specific domains.
  • Provide assistance if server-level restrictions are causing the issue.

Important Notes #

  • X-Frame-Options is outdated and only supports basic options (DENY, SAMEORIGIN, ALLOW-FROM). ALLOW-FROM is deprecated in Chrome, Firefox, and Safari.
  • Content-Security-Policy (CSP) with frame-ancestors is the modern, recommended method.
  • Always test changes on a staging site first.

Tips for Testing External Embedding #

  1. After applying a fix, clear browser cache (or test in incognito).
  2. Hard refresh the external platform page.
  3. Check browser console (F12 > Console) for remaining header errors.
  4. Verify the iframe code uses the correct tour page URL.

Still Facing Issues Embedding WP VR Tours Externally? #

  • Confirm the external platform actually supports iframes (some ad networks have restrictions).
  • Share the exact error message, tour page URL, and target platform with RexTheme support.

Now you can confidently share your stunning WP VR 360 virtual tours across external websites and platforms!

Related WP VR Guides: