To make an HTML 5 video ad compatible with AdRotate Pro, I’ve found my way to Tumult software’s Hype app. Pitched as an HTML 5 animation tool, it can also be used to generate the supporting files for a autoplaying, looping video ad using mp4 or webm formatted video.
Steps:
1. Define your canvas size / the size of the ad:
2. Drag and drop the first of your video files onto the blank scene canvas and position it.
3. In the Element tab on the right of the window, select your alternate video file to ensure compatibility across browsers. Go through the check-boxes beneath the video element – I want the video to play automatically, loop, and hide controls:
4. In the Actions tab on the right of the window, add an “On Mouse Click” action: select “Go to URL” and paste in the link your advertiser has provided to you. Check the box if you want the link to open in a new window.
5. If you want to a responsive ad, you can use the Layouts feature create device or screen-size specific alternatives. You’ll need to go through all the above steps again for each layout…
6. Once your scene / layouts are complete, save your work, and then select “Export as HTML 5” from the File menu.
Read through any warnings in the browser compatibility summary window that pops up, and if you’re happy to proceed, click on the export button. Name the folder and save it where you want using the Save Dialog box that opens.
7. Upload the new folder into the “/wp-content/banners” folder on your server using SFTP. This directory should have been created by AdRotate when you installed it.
8. In the AdRotate’s “Manage Adverts” screen, in the WordPress admin area, create a new advert.
9. Name your ad. Next to the AdCode area, click on the “iframe” example, and then adjust the code to suit your needs.
10. In the Banner Asset area, use the Banner Folder drop-down menu to select the ad you just uploaded.
11. Select your schedule, groups and other options for the ad, and then click on the “Save” button….