{"id":8,"date":"2024-10-04T10:24:15","date_gmt":"2024-10-04T10:24:15","guid":{"rendered":"https:\/\/badapples.tech\/?p=8"},"modified":"2025-05-21T10:28:21","modified_gmt":"2025-05-21T10:28:21","slug":"html-5-video-ads-in-adrotate-with-hype","status":"publish","type":"post","link":"https:\/\/badapples.tech\/?p=8","title":{"rendered":"HTML 5 Video Ads in Adrotate with Hype"},"content":{"rendered":"<p>To make an HTML 5 video ad compatible with AdRotate Pro, I&#8217;ve found my way to Tumult software&#8217;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.<\/p>\n<p>Steps:<\/p>\n<p>1. Define your canvas size \/ the size of the ad:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"float: right;\" title=\"Hype_Scene_Size.png\" src=\"https:\/\/badapples.tech\/wp-content\/uploads\/2024\/04\/Hype_Scene_Size.png\" alt=\"Hype Scene Size.\" width=\"522\" height=\"600\" border=\"0\" \/><\/p>\n<p>2. Drag and drop the first of your video files onto the blank scene canvas and position it.<\/p>\n<p>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 &#8211; I want the video to play automatically, loop, and hide controls:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"float: right;\" title=\"Hype_Element_Controls.png\" src=\"https:\/\/badapples.tech\/wp-content\/uploads\/2024\/04\/Hype_Element_Controls.png\" alt=\"Hype Element Controls.\" width=\"520\" height=\"584\" border=\"0\" \/><\/p>\n<p>4. In the Actions tab on the right of the window, add an &#8220;On Mouse Click&#8221; action: select &#8220;Go to URL&#8221; 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.<\/p>\n<p>5. If you want to a responsive ad, you can use the Layouts feature create device or screen-size specific alternatives. You&#8217;ll need to go through all the above steps again for each layout&#8230;<\/p>\n<p>6. Once your scene \/ layouts are complete, save your work, and then select &#8220;Export as HTML 5&#8221; from the File menu.<\/p>\n<p>Read through any warnings in the browser compatibility summary window that pops up, and if you&#8217;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.<\/p>\n<p>7. Upload the new folder into the &#8220;\/wp-content\/banners&#8221; folder on your server using SFTP. This directory should have been created by AdRotate when you installed it.<\/p>\n<p>8. In the AdRotate&#8217;s &#8220;Manage Adverts&#8221; screen, in the WordPress admin area, create a new advert.<\/p>\n<p>9. Name your ad. Next to the AdCode area, click on the &#8220;iframe&#8221; example, and then adjust the code to suit your needs.<\/p>\n<p>10. In the Banner Asset area, use the Banner Folder drop-down menu to select the ad you just uploaded.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"float: right;\" title=\"AdRotate_Ad_Setup.png\" src=\"https:\/\/badapples.tech\/wp-content\/uploads\/2024\/04\/AdRotate_Ad_Setup.png\" alt=\"AdRotate Ad Setup.\" width=\"600\" height=\"355\" border=\"0\" \/><\/p>\n<p>11. Select your schedule, groups and other options for the ad, and then click on the &#8220;Save&#8221; button\u2026.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To make an HTML 5 video ad compatible with AdRotate Pro, I&#8217;ve found my way to Tumult software&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[2,3,4],"class_list":["post-8","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-macos","tag-setapp","tag-software"],"_links":{"self":[{"href":"https:\/\/badapples.tech\/index.php?rest_route=\/wp\/v2\/posts\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/badapples.tech\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/badapples.tech\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/badapples.tech\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/badapples.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":1,"href":"https:\/\/badapples.tech\/index.php?rest_route=\/wp\/v2\/posts\/8\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/badapples.tech\/index.php?rest_route=\/wp\/v2\/posts\/8\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/badapples.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/badapples.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/badapples.tech\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}