Prevent Unity Web Player from seizing the focus.

I copied the code from the auto generated web.html file to embed the WebPlayer into one of my portfolios pages, and as you can see here: http://dinkelb.org/DeadWood.html this works like a charm, tho there is one major problem with this; namely that the page automatically loads focusing on the WebPlayer. Besides that there are some Minor problems scrolling the page using the mouse wheel. (Since Unity demands the Input Signal…)

I want visitors to read the Text at the very top of the page first an then scroll down to find the player and play the demo.

It would be a very nice solution if the WebPlayer would be inactive until he get’s clicked, so the visitor can actually choose if he wants to load the demo or not. On the other hand the demo will be almost loaded after reading the text at the top and has it’s own start menu, so I would already be okay if the Webplayer was not automatically handled like an anchor - link …

Thanks for any suggestions.

JavaScript, JQuery and CSS
declaration from inside the Unity web-html file:

<script type='text/javascript' src='https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/jquery.min.js'></script>
		<script type="text/javascript">
		<!--
		var unityObjectUrl = "http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js";
		if (document.location.protocol == 'https:')
			unityObjectUrl = unityObjectUrl.replace("http://", "https://ssl-");
		document.write('<script type="text\/javascript" src="' + unityObjectUrl + '"><\/script>');
		-->
		</script>
		<script type="text/javascript">
		<!--
			var config = {
				width: 960, 
				height: 600,
				params: { enableDebugging:"0" }
				
			};
			var u = new UnityObject2(config);

			jQuery(function() {

				var $missingScreen = jQuery("#unityPlayer").find(".missing");
				var $brokenScreen = jQuery("#unityPlayer").find(".broken");
				$missingScreen.hide();
				$brokenScreen.hide();
				
				u.observeProgress(function (progress) {
					switch(progress.pluginStatus) {
						case "broken":
							$brokenScreen.find("a").click(function (e) {
								e.stopPropagation();
								e.preventDefault();
								u.installPlugin();
								return false;
							});
							$brokenScreen.show();
						break;
						case "missing":
							$missingScreen.find("a").click(function (e) {
								e.stopPropagation();
								e.preventDefault();
								u.installPlugin();
								return false;
							});
							$missingScreen.show();
						break;
						case "installed":
							$missingScreen.remove();
						break;
						case "first":
						break;
					}
				});
				u.initPlugin(jQuery("#unityPlayer")[0], "Demos/DeadWood/DeadWood.unity3d");
			});
		-->
		</script>
		<style type="text/css">
		<!--
		body {
			font-family: Helvetica, Verdana, Arial, sans-serif;
			background-color: white;
			color: black;
			text-align: center;
		}
		a:link, a:visited {
			color: #000;
		}
		a:active, a:hover {
			color: #666;
		}
		p.header {
			font-size: small;
		}
		p.header span {
			font-weight: bold;
		}
		p.footer {
			font-size: x-small;
		}
		div.content {
			margin: auto;
			width: 960px;
		}
		div.broken,
		div.missing {
			margin: auto;
			position: relative;
			top: 50%;
			width: 193px;
		}
		div.broken a,
		div.missing a {
			height: 63px;
			position: relative;
			top: -31px;
		}
		div.broken img,
		div.missing img {
			border-width: 0px;
		}
		div.broken {
			display: none;
		}
		div#unityPlayer {
			cursor: default;
			height: 600px;
			width: 960px;
		}
		-->
		</style>

The actual webplayer element:

<div class="content">
                                <div id="unityPlayer">
                                    <div class="missing">
                                        <a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
                                            <img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
                                        </a>
                                    </div>
                                    <div class="broken">
                                        <a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now! Restart your browser after install.">
                                            <img alt="Unity Web Player. Install now! Restart your browser after install." src="http://webplayer.unity3d.com/installation/getunityrestart.png" width="193" height="63" />
                                        </a>
                                    </div>
                                </div>
                            </div>

I had this same problem and solved it by loading the unity file “on click” instead of whenever it feels like it.

Find the code that looks like this:

u.initPlugin(jQuery("#unityPlayer")[0], "Demos/DeadWood/DeadWood.unity3d");

and replace it with something like this instead:

$( "#unityPlayer" ).click(function() {	
u.initPlugin(jQuery("#unityPlayer")[0], "Demos/DeadWood/DeadWood.unity3d");
});

The “#unityPlayer” is the name of the id for the element you want to click to start the loading, in this case it is the div element that holds the Unity web player. You might want to put an image or button there instead to click on.