Adding Html5 to WordPress
The first step is to create a web page with the animation that is separate from the WordPress page. In File > Export Settings, uncheck all boxes associated with placement of the canvas on the web page. You definitely don't want responsive checked or centering checked (responsive design and centering would be handled on the WordPress page). Use File > Export/Publish Movie > As Html5 Web Page. To see a simple web page with Html5 animation that will later be added to a WordPress page, click here.
The next step is to add an iframe to your WordPress theme. Login to your WordPress dashboard. Select Appearance and Editor from the sub-menu as shown here
The next step is to select Theme Header header.php on the right (as shown below) to edit the header file where the iFrame will be placed.
Search for </header> in the file. Add the following iframe code after </header>
If you want the animation centered horizontally, use this code instead
Press Update File. Some header.php files have editing priviledges that make it complicated to edit the file. If you are not able to save the changes, probably the simplest solution is to download the file from its server location in wp-content/themes/your-theme to your local disk. Make the change and upload to the same location. This site codex.wordpress.org/Editing_Files explains this. If you let Wordpress update the theme file, the added code will go away and will have to be added again.
With this change to the header.php file, this theme displays with the Html5 animation which you can view by clicking here.
To achieve a responsive iframe with Html5 canvas content requires that both the Html5 canvas and iframe be configured to be responsive using css styling. KoolMoves 9.7 and KoolShow 2.1 support configuring an iframe with Html5 canvas content to be responsive. In particular, the proper bottom padding will be calculated based on the ratio of height to width. More about this can be found at stackoverflow.com.
The following code will produce a horizontally centered, responsive iframe (max-width is important to achieve centering at all page widths).
The default behavior of WordPress is that all pages for a site have the same theme. If you edit the header.php file, all pages will have the animation. There is a WordPress plugin called Jonradio Multiple Themes which allows a different theme for each page.