Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

How to embed a unity game into a webpage

Discussion in 'Editor & General Support' started by Rush-Rage-Games, Apr 19, 2011.

Thread Status:
Not open for further replies.
  1. Rush-Rage-Games

    Rush-Rage-Games

    Joined:
    Sep 9, 2010
    Posts:
    1,997
    Hello,

    I was wondering how to embed a unity game into a web page. Lets say I own xgames.com (just an example) and I made a game. I uploaded the .html and a .unity3d file named ""webplayer" to a page called files (the page is hidden). How would I embed the game into a webpage? Would I use custom html?

    Thanks in advance!
     
  2. Rush-Rage-Games

    Rush-Rage-Games

    Joined:
    Sep 9, 2010
    Posts:
    1,997
  3. Sam at FPS

    Sam at FPS

    Joined:
    Sep 1, 2009
    Posts:
    80
    The simplest way is to grab the guts out of the html file generated by unity and stick that in the page html that you want the game in.

    Add this bit in the head:

    HTML:
    		
    <script type="text/javascript" src="http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject.js"></script>
    <script type="text/javascript">
    <!--
    function GetUnity() {
    	if (typeof unityObject != "undefined") {
    		return unityObject.getObjectById("unityPlayer");
    	}
    	return null;
    }
    if (typeof unityObject != "undefined") {
    	unityObject.embedUnity("unityPlayer", "NAMEOFYOURGAMEUNITYFILE.unity3d", 480, 320);
    	
    }
    -->
    </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: 480px;
    }
    div.missing {
    	margin: auto;
    	position: relative;
    	top: 50%;
    	width: 193px;
    }
    div.missing a {
    	height: 63px;
    	position: relative;
    	top: -31px;
    }
    div.missing img {
    	border-width: 0px;
    }
    div#unityPlayer {
    	cursor: default;
    	height: 320px;
    	width: 480px;
    }
    -->
    </style>
    
    And this bit somewhere in the body (wherever you want it)

    HTML:
    <p class="header"><span>Unity Web Player | </span>WebPlayer</p>
    <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>
    </div>
    <p class="footer">« created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> »</p>
    That's all and now it's in your webpage.


    If you wanted to get a little bit more fancy and have it only load when you click on it or something, you'll need to do a bit of Googling for 'Unity webplayer load on demand' or something. I wrote a little post ages ago about doing this for squarespace blogs.

    Fake edit: Just noticed how much simpler the Unity generated html page is now. Very nice.
     
    Last edited: Apr 20, 2011
  4. Rush-Rage-Games

    Rush-Rage-Games

    Joined:
    Sep 9, 2010
    Posts:
    1,997
    Sorry I didn't reply faster, I have been trying to figure this out.

    So, the name of my unity3d and html file is "webplayer". And when exporting the webplayer I checked the boxes streamed and offline deployment. The I uploaded all 3 of the files to the website. (webplayer.html, webplayer.unity3d, and UnityObject.js) Then on a page I added the following code to a page.


    HTML:
    <script type="text/javascript" src="http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject.js"></script>
    <script type="text/javascript">
    <!--
    function GetUnity() {
    	if (typeof unityObject != "undefined") {
    		return unityObject.getObjectById("unityPlayer");
    	}
    	return null;
    }
    if (typeof unityObject != "undefined") {
    	unityObject.embedUnity("unityPlayer", "webplayer.unity3d", 480, 320);
    	
    }
    -->
    </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: 480px;
    }
    div.missing {
    	margin: auto;
    	position: relative;
    	top: 50%;
    	width: 193px;
    }
    div.missing a {
    	height: 63px;
    	position: relative;
    	top: -31px;
    }
    div.missing img {
    	border-width: 0px;
    }
    div#unityPlayer {
    	cursor: default;
    	height: 320px;
    	width: 480px;
    }
    -->
    </style>
    <p class="header"><span>Unity Web Player | </span>WebPlayer</p>
    <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>
    </div>
    <p class="footer">« created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> »</p>
    
    But it does not work. It said that download failed.


    Do I need to tell the code the addres of my game files? Thanks for all of your help, sorry I could not figure this out!
     
  5. spaceMan-2.5

    spaceMan-2.5

    Joined:
    Oct 21, 2009
    Posts:
    710
    that is a good option..

    and you can try dropbox.. is easy to use and effective...
    just add a link on your website to the dropbox url and there you go..

    https://www.dropbox.com/home
     
    alrashid likes this.
  6. Rush-Rage-Games

    Rush-Rage-Games

    Joined:
    Sep 9, 2010
    Posts:
    1,997
    Hello everyone,

    @spaceMan-2.5 I will check out dropbox, looks pretty cool!

    I was shearching around the internet and found a code that works for me. Here it is:


    HTML:
    <object id="UnityObject" classid="clsid:444785F1-DE89-4295-863A-D46C3A781394"
        width="600" height="450"
        codebase="http://webplayer.unity3d.com/download_webplayer/UnityWebPlayer.cab#version=2,0,0,0">
        <param name="FULL ADRESS TO .UNITY3D FILE " value="NAME OF .unity3d" />
        <embed id="UnityEmbed" src="FULL ADDRESS TO .UNITY3D FILE " width="600" height="450"
            type="application/vnd.unity" pluginspage="http://www.unity3d.com/unity-web-player-2.x" />
    </object>
    
    Then just replace the all caps text with what it says. Hope this helps, and thanks for your help!
     
  7. Bazoo_Studios

    Bazoo_Studios

    Joined:
    Dec 18, 2011
    Posts:
    92
    this forum may be dead but i am having same problem. what do i do with that html code above
     
  8. Euphorial

    Euphorial

    Joined:
    Feb 21, 2012
    Posts:
    3
    Its quite simple. Change the Italics to the location you built your unity game file. Drag both the files into your website folder (The HTML and .unity3D which it creates when you build) and then place this in the HTML

    <object id="UnityObject" classid="clsid:444785F1-DE89-4295-863A-D46C3A781394"
    width="800" height="450"
    codebase="http://webplayer.unity3d.com/download_webplayer/UnityWebPlayer.cab#version=2,0,0,0">
    <param name="C:\Users\Mark Connolly\Desktop\MySite\WebPlayer.unity3d" value="WebPlayer.unity3d" />
    <embed id="UnityEmbed" src="C:\Users\Mark Connolly\Desktop\MySite\WebPlayer.unity3d" width="600" height="450"
    type="application/vnd.unity" pluginspage="http://www.unity3d.com/unity-web-player-2.x" />
    </object>
     
  9. JamesArndt

    JamesArndt

    Joined:
    Dec 1, 2009
    Posts:
    2,932
    I'm dealing with this issue right now myself on my Moonfruit hosted site. I can't find a way to get the file path to the .unity3d file...though I can upload it to my file manager on the host. So since I can't find the file path, I can't put that into the HTML code snippet so it knows where the Unity file is!
     
  10. tracend

    tracend

    Joined:
    Jun 25, 2011
    Posts:
    19
    I've been including unity files in web pages in a constantly increasing rate and needed a generic solution to streamline the process.

    I was looking for a jQuery plugin dealing with this but I didn't find one - so I created it:
    https://gist.github.com/3082093

    Basically it gives you a one liner that you can include in any web pages and has only jQuery as a dependency.

    There's a short readme giving usage instructions but feel free to post any questions if you want to use it.

    Cheers
     
    Last edited: Jul 10, 2012
  11. LtKelleyUSMC

    LtKelleyUSMC

    Joined:
    Oct 6, 2012
    Posts:
    44
    Hey there, UNITY3D PEOPLE
    I decided to add my unity3d object to a webpage, and ran across this little GEM.
    This does work.
    All you have to do, just like Euphorial said, is replace the italics code programming, with the location of where your .unity3d object is.

    Just thought I would make it more READABLE (like your suppose to do when you program): :D
    THIS IS CALLED STRUCTURING YOUR CODE, people...
    It makes it SO MUCH EASIER TO READ, when you have to go back thru your code to debug, or whatever...
    Wouldn't you agree? Can we not go back to the standard?
    Code (csharp):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    3.  
    4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    5. <head>
    6.     <title>The Title of Your Webpage</title>
    7. </head>
    8. <body>
    9.       <object id="UnityObject"
    10.               classid="clsid:444785F1-DE89-4295-863A-D46C3A781394"
    11.               width="800"
    12.               height="450"
    13.               codebase="http://webplayer.unity3d.com/download_webplayer/UnityWebPlayer.cab#version=2,0,0,0">
    14.          <param name="[Your Unity3D Game Name].unity3d"
    15.                 value="[Your Unity3D Game Name].unity3d" />
    16.              <embed id="UnityEmbed"
    17.                     src="[Your Unity3D Game Name].unity3d"
    18.                     width="600"
    19.                     height="450"
    20.                     type="application/vnd.unity"
    21.                     pluginspage="http://www.unity3d.com/unity-web-player-2.x" />
    22.      </object>
    23.  
    24. </body>
    25. </html>
    26.  
    Enjoy
     
    Last edited: Apr 7, 2013
  12. omgketchup

    omgketchup

    Joined:
    Mar 28, 2012
    Posts:
    41
    Best post ever. I would have closed this page and not even bothered without making that code readable.
     
  13. zyarizk

    zyarizk

    Joined:
    Mar 6, 2013
    Posts:
    7
    It does'n work,,, :(
    Any suggestion?
     
  14. Graham-Dunnett

    Graham-Dunnett

    Administrator

    Joined:
    Jun 2, 2009
    Posts:
    4,287
    In Unity make a webplayer build. Unity creates a folder with an html and unity3d file. Copy those to your webserver. Now enjoy the game.
     
    Argenuto likes this.
  15. efath

    efath

    Joined:
    Sep 28, 2013
    Posts:
    3
    My hero. Works like a charm!
     
  16. Half_Res

    Half_Res

    Joined:
    Apr 16, 2013
    Posts:
    12
    Here's a commented version of LtKelley's code with the sections that you need to change marked up. Works for me

    Code (html):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    3. <head>
    4.     <title>PAGE TITLE</title>
    5. </head>
    6. <body>
    7.       <object id="UnityObject"
    8.               classid="clsid:444785F1-DE89-4295-863A-D46C3A781394"
    9.               width="800"
    10.               height="450"
    11.               codebase="http://webplayer.unity3d.com/download_webplayer/UnityWebPlayer.cab#version=2,0,0,0">
    12.          <!--change address below to match file path-->
    13.          <param name="https://URLGOESHERE/FILENAME.unity3d"
    14.                 value="FILENAME.unity3d" /> <!--change to name of unity file-->
    15.              <!--change address below to match file path-->
    16.              <embed id="UnityEmbed"
    17.                     src="https://URLGOESHERE/FILENAME.unity3d"
    18.                     width="960"
    19.                     height="600"
    20.                     type="application/vnd.unity"
    21.                     pluginspage="http://www.unity3d.com/unity-web-player-2.x" />
    22.      </object>
    23. </body>
    24. </html>
     
  17. Pratap-Dafedar

    Pratap-Dafedar

    Joined:
    Aug 30, 2013
    Posts:
    22
    Here is a blog with nice tutorial explaining your question.

    <object id="UnityObject" classid="clsid:444785F1-DE89-4295-863A-D46C3A781394"
    width="512" height="512"
    codebase="http://webplayer.unity3d.com/download_webplayer/UnityWebPlayer.cab#version=2,0,0,0">
    <param name="https://docs.google.com/uc?export=download&id=0B1LwSbIQO00rb1p4ZXdsUV8tNmM" value="Desktop.unity3d" />
    <embed id="UnityEmbed" src="https://docs.google.com/uc?export=download&id=0B1LwSbIQO00rb1p4ZXdsUV8tNmM" width="512" height="512"
    type="application/vnd.unity" pluginspage="http://www.unity3d.com/unity-web-player-2.x" />
    </object>


    http://pratapdafedar.blogspot.in/2015/01/embed-unity3d-game-in-blogger.html
     
  18. duv222_

    duv222_

    Joined:
    Apr 14, 2015
    Posts:
    1
  19. Deleted User

    Deleted User

    Guest

    This was so convenient but this is now obsolete - or more accurately, as of this march 2016. Any alternatives? :)
     
    riagrawal likes this.
  20. Aurore

    Aurore

    Director of Real-Time Learning

    Joined:
    Aug 1, 2012
    Posts:
    3,106
Thread Status:
Not open for further replies.