RenatoB
Hello Renato,
On your FTP server
create/make a directory to hold your games
upload your C2 HTML5 exported files into that directory
Inside WordPress
Insert the "iframe code" in TEXT mode!!
Paste this into your WordPress page:
<iframe src="<URL to your project's index.html>" name="<Name of your Iframe>" width="???" height="???" frameborder="0" scrolling="no" ><p>Your browser does not support iframes.</p> ></iframe>
Replace the URL with: "http://yourdomain.com/directoryname/subdirectoryname/index.html"
You don't even have to use the "index.html" part because the server "expects" an index or default html file but still, it is best to specify.
Width and height of your game
Here is where it get's a little tricky. The culprit is RESPONSIVE web design.
Assuming you have a WordPress theme which comes with that feature (and it should), you'll need to look over your "main.css" file and find the class which deals with making inserted objects responsive.
Most examples on the net only describe how to do with with a YouTube video so most likely, you will have to add custom CSS and then use a <div> tag to reference the "class" (CSS Class).
The above iframe code would then look something like this:
<div class="xxxxxxxxclassname">
<iframe ...... </iframe>
</div>
Please tell us your URL so that we can check if your site uses responsive design and if it does, you should be able to tweak the CSS class to make it happen.
Also. If you have multiple games, you need to create a sub directory for every game title. Please make sure that the first directory (which holds the sub directories) is not empty because it is best practise to have an index.php file in there which you need to create with a text editor (for security reasons).
On your computer, make a new file with this text inside and then save it as index.php
<?php
// Silence is golden.
?>
This will display a blank page and thus, prevent a directory listing which would give away your file structure.
See if this is enough to get you going.
Maybe you will need to find a new WP theme or append your existing one with the following css class:
You can find your CSS file inside
wp-content > themes > themename > style.css (or what ever name the author used)
I use this CSS code to make the magic happen:
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
So then, the iframe would be inserted this way:
<div class="Flexible-container">
iframe text
</div>
I hope you are up to speed with CSS otherwise all of this will seem complicated but it is actually no.
The good news is that you only have to do this once. After that is created and you get the first game to display as you want, you can always just copy paste and only change the game sub dir and you are good to go!
YAY!