1. Offline Test

For testing the Web Player before uploading it to your own web server it is possible to open the contained index.html with Firefox. For being able to test offline with Safari it's necessary to go in to the Safari options and enable the item Preferences -> Advanced -> “Show Develop menu in menu bar” and afterwards in the Safari Menu: Develop -> Disable Local File Restrictions.

2. Supported Browsers

An overview of the supported browsers on desktop in mobile is in the exported folder under “webplayer_browser_support_matrix/index.html”

3. Hosting

To include the TigerCreate 2 Web Player in an existing website or share it as an independent web address it needs to be hosted first.
For that the contained folder with the name / prefix "TC2WebPlayer" needs to be uploaded to your own web server.

4. Inclusion

After the step "Hosting" the Web Player can be directly opened, referenced as link or be included as an iframe in an existing website.

4.1 Open the Web Player directly

The Web Player can also be opened without having designed your own website around it. For that the address of the contained index.html needs to be opened in a web browser. This file refers to the first scene of the exported project.

4.2 Inclusion as link

If the Web Player needs to be included in an existing website as link the contained index.html needs to be referenced.

Example:
<a href=my-domain.com/TC2WebPlayer/index.html”></a>

4.3 Inclusion as iframe

The contained demo.html shows how the iframe inclusion works.
For that simply copy the red HTML code, paste it into the desired position and complete the web address under src=”TC2WebPlayer...” with the one of your own web server.
The comprising <div> container takes care of your exported project always keeping the correct aspect ratio.
The size of this iframe + div construct complies with the size of the parent element.
It is recommended for the web server as well as for the included iframe to use "https", otherwise it could lead to the first of following problems:

4.4 Inclusion as iFrame in Wordpress

In Wordpress it's not possible by default to include iFrames in HTML.
That's why a plugin needs to be installed which offers this particular functionality.
Here we recommend the plugin “iframe” by webvitaly (Version 4.3).
Subsequently iFrames can be included with square brackets in the Visual Editor:
[iframe src="https://my-domain.com/TC2WebPlayer/index.html" width="100%" allowfullscreen="true"]

If the iFrame should be more narrow than the element above it's also possible to choose a smaller value for "width".
Are the Wordpress site as well as the contained iFrame on the same domain the correct aspect ratio is automatically being kept. So an adjustment of the "width" parameter also has an effect on the height of the iFrame.
If they are both on different domains "width" and "height" needs to be set explicitly if the correct aspect ratio should be kept.

If the iFrame now has a smaller width than the element above and should be centered, this can be done easily in the Visual Editor by highlighting the iFrame code and put the Text on "Align Center".

4.5 Launching the Web Player in a certain language

If the exported project supports multiple languages one language can explicitly be set as standard.
Hereby the Web Player call needs to contain a "language" parameter as in this example:
https://my-domain.com/TC2WebPlayer/index.html?language=EN

5. Know Problems and Proposed Solutions

Web Player or parts are not loading:
	If the Web Player is not loading as expected you can look into the developer console of the respective browser for a possible error message.

		-	Safari “[blocked] The page at about:blank was not allowed to display insecure content from http/mydomain.com/TC2WebPlayer”
		-    Chrome “Mixed Content: The page at 'https://another-domain.net/' was loaded over HTTPS, but requested an insecure resource 'http/my-domain.com/TC2WebPlayer'. This request has been blocked; the content must be served over HTTPS.”
		-    Chrome “net::ERR_INSECURE_RESPONSE”

	In this case it has been tried to include the iframe in a site that delivers a valid ssl certificate. The web server that is being requested from within the iframe on the other hand delivers no valid ssl certificate.
	The solution in this case: get a valid ssl certificate for the web server that is hosting the Web Player and reference it in the iframe with https.

Problems with the Fullscreen Mode:
	- 	Elements of the page are shown on top of the fullscreen
	-> this problem is known in relation with Safari 11: the iframe / its document gets a CSS z-index of 2147483647 (maximum value of a signed 32 bit integer value)
	In this case it could be that the element shown on top of the fullscreen has an unusually high z-index.
	The solution would be to reduce the z-index of this element (for example to 2147483646)

	-	Areas of the Scene don't respond to clicks
	-> if this problem occurs in Safari a placeholder under the included iframe could help. If this is not a suitable workaround for you please contact our support