Update, Oct 28, 2021: An OAM dropped into Indesign now works correctly on iOS. The workaround below was valid in Aug 2020 but is no longer needed
My apologies, Tom, I really should have tested this on an iPad. I can confirm it doesn't work.
When dragging an OAM file into InDesign, an iframe is generated that points to that OAM's content.
For some weird reason, this works fine everywhere except for iBooks as you discovered. I see lots of discussion about iframes pointing to external content not working, but nothing about local iframed content. I did find a way to get this to work though, but it's a long post.
InDesign generates this code for an OAM dropped in, assuming your export name is moto_animation. For simplicity, I recommend exporting with lowercase filenames:
<div id="_idContainer017">
<div class="_idGenObjectAttribute-3">
<iframe class="_idGeneratedPreventDefault" id="_idHTMLPageItem000" src="html/moto_animation/Assets/index.html">
</iframe>
</div>
</div>
iBooks doesn't like this, but it does work if we break open the epub and load the JavaScript directly for that Hype content:
<div id="_idContainer017">
<div class="_idGenObjectAttribute-3">
<div id="motoanimation_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="html/moto_animation/Assets/moto_animation.hyperesources/motoanimation_hype_generated_script.js?62715"></script>
</div>
</div>
</div>
So the annoying part here is that to get the above code and file path, I had to unzip the epub, find the embed code, replacing the iframe, save that XHTML file, then rezip the folder, and renaming the .zip file as .epub. I found a way to speed this up by only working in Indesign.
First export your file as an regular HTML file to your desktop. Use the same export name that you will use when exporting as OAM.
You can then open the .html file and retrieve this code, the three lines that load a Hype document:
<div id="motoanimation_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="Moto_animation.hyperesources/motoanimation_hype_generated_script.js?62715"></script>
</div>
So the only thing you would need to add to this code for it work within InDesign, is: html/Moto_animation/Assets/ in front of Moto_animation.hyperesources/motoanimation_hype_generated_script.js?62715 because InDesign places OAM content in that structure.
So your complete code to use in InDesign assuming your export name was Moto_animation would be:
<div id="motoanimation_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="html/Moto_animation/Assets/Moto_animation.hyperesources/motoanimation_hype_generated_script.js?62715"></script>
</div>
'Links' like images and OAM files leave the links panel if they don't exist in the document. So to workaround this, I recommend placing your oam file somewhere on your page that has no other animations, and just setting its opacity to zero and making it 0x0 dimensions. There might be a better way to handle this, but I don't see how. Once you do that, you can add the object (using the direct JS reference).
So now that the OAM is in InDesign and you know what code you can use, select Object > Insert HTML... and paste that final motoanimation_hype_container code.
Here's a guide to generating that embed code (replace with your width and height):
<div id="oamfilename_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="html/oamfilename/Assets/oamfilename.hyperesources/oamfilename_hype_generated_script.js" </script></div>
Below is my InDesign document and exported Epub for testing:
iBooks-InDesign Hype Example.zip (2.2 MB)
This is the same as this recommended workflow from 2015: Howto: Get Hype output into a Fixed-Layout EPUB on an iPad
-
Readium (Chrome Extension Epub reader) -
Books.app for Mac + iBooks for iOS