This tutorial describes how to implement HTML5 ads into your site using the free version of Advanced Ads.

Basic structure

HTML5 banner ads are like small web projects on their own, including a couple of files.

When you receive a bundle of these files, you also have an HTML file included. You have two options. You can use that file as a template and copy the ad specific codes into a head and body ad. Or you implement the .html file within a new iframe. I am going to explain both methods below.

Copy the HTML5 ad from the .html file

This method works best for users who are experienced with HTML and general template logic. Choose the second method if you are less experienced.

  1. Open the .html file you received for the ad.
  2. Create a new ad in Advanced Ads and put the code that is located between the <head> tags from the .html file there. Remove <title> and any <meta> though.
HTML5 ad header code
Copy the code between the <head> tags into a new ad unit
  1. Publish this ad in a head placement in Advanced Ads > Placements.
  2. Create another ad and put everything located between the <body> tags from the .html file there.
  3. Publish this ad wherever you want it to show up.
HTML5 ad body code
Copy the code between the <body> tags into another ad unit
  1. Upload all referenced files from the HTML5 ad bundle to your site’s directory and adjust the paths in the head and body ad.
  2. The ad should show up correctly now.

Additional notices:

When your <body> tag includes a call to a function like <body onload="init();">, you might need to call this function manually since you are not copying the body tag. Just add a line like this into the body ad:

<script>jQuery( document ).ready( function(){ init(); })</script>

You should also make sure to rename the init() function in this call and the head ad to something more specific or conflict with a function with the same name.

Using iframes for HTML5 ads

  1. Upload the folder with the HTML5 ad details to your site using FTP. You could create a new directory like html5 for all HTML5 banner in wp-content/uploads so that they are located in wp-content/uploads/html5/my-ad/
  2. Create a new ad of the Plain Text and Code ad type and include the following code:
  3. <iframe src="http(s)://" width="300" height="250">
  4. Adjust the path http(s):// to your actual path. Especially the name of the .html file might be different.
  5. Adjust all paths to files within the .html file to use the correct path.
  6. Adjust the values for the width and height parameters in the iframe code above to match your ad’s size.
  7. Publish this ad wherever you want it to show up.
Example for an HTML5 ad embedded via iframe

Responsive iframes

If your HTML5 ad is responsive, you need to implement your iframe code like this:

<div class="html5-container"> 
<iframe class="html5-content" src="" width="100%" height="100%"></iframe>
.html5-container {
background-color: red;
width: 100%;
padding-top: 83.33%; /* 300:250 Aspect Ratio */
position: relative;

.html5-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;

You might need to adjust the padding-top value and classes if you have ads with different ratios.

What else you might need to know about HTML5 ads

If the ad covers other elements: Enter the size and enable the Reserve this space checkbox in the Size options on the ad edit page.

If your iframe has unwanted borders or scrollbars, you can add the attribute frameborder=” 0″ to your iframe-tag or its CSS class.