If you’re experiencing issues embedding WP VR tours on external websites or advertising platforms, this guide will help you resolve common errors related to iframe embedding and direct links.

Problem #

When trying to embed a 360 tour from your WordPress site on an external platform, you may encounter errors like:

• The link is not recognized or doesn’t display properly.
• An error such as “Refused to connect” or “X-Frame-Options: SAMEORIGIN” appears.

Cause #

The issue typically arises because of browser security headers (e.g., X-Frame-Options or Content-Security-Policy) set by your WordPress site or server. These headers may restrict the tour from being embedded on external websites.

Solutions #

There are several ways to resolve this issue. Depending on your technical expertise and setup, you can choose from the following solutions:

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:

• HTTP Headers
• WP Content Security Policy

Configure the plugin to add:

• For X-Frame-Options: Use ALLOW-FROM https://your-platform-domain.com.
• For CSP: Use frame-ancestors ‘self’ https://your-platform-domain.com;.

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 an older standard and supports only basic directives like DENY, SAMEORIGIN, or ALLOW-FROM. However, ALLOW-FROM is deprecated in modern browsers.
• Content-Security-Policy (CSP) is the preferred method for controlling iframe embedding.

Tips for Testing #

1. After implementing a solution, clear your browser cache and refresh the page.
2. Test the direct link or iframe embedding on the external platform to confirm it works.

Still Facing Issues? #

If none of the above solutions resolve your issue:

• Verify that the external platform supports iframe embedding.
• Contact our support with details about the platform and the specific error message for further assistance.