The Web Content overlay lets you display a web page within a view area. Users can see the web page content in the view area without having to display a separate in-app browser. You can specify a web URL or a local HTML file. Note the following issues:
- If you specify a local HTML file, make sure that the .html file and associated files and folders appear in the same folder. When the article content is created, all the files in the same folder as the .html file are uploaded, so limit that HTML folder to only the necessary assets. For example, if you add the .html file to Documents folder, all files and subfolders in the Documents are uploaded.
- For any URL that gets redirected to a mobile URL automatically, specify the mobile URL (such as http://mobile.twitter.com/), not the original URL (such as http://twitter.com).
- If you specify an HTML animation for a Web Content overlay, set the overlay to Auto Play with a minimal delay (such as 0.125 seconds) to ensure that the animation plays properly. Setting a delay prevents the overlay from auto-play when the page is preloaded into memory.
- In InDesign CS6 or later, you can use the Insert HTML command to insert the embed code of a YouTube clip. For best results, edit the YouTube embed code to include "src=https://www.youtube.com" instead of "src=//www.youtube.com." Set the overlay to Auto Play, and add a poster image in front of the overlay.
To specify a URL, type or paste the URL in the Assets field. Type the entire URL, including “http://.”
To use local HTML files, click the folder icon and specify the local HTML file. The HTML file (such as index.html) should appear in a folder that includes any images or scripts used in the HTML file.
Select this option to load the web page when the page is loaded on the mobile device. You can also specify the number of seconds to delay. If your target HTML is an animation that plays, specify a minimal delay.
If this option is selected, the transparent background in a web page is preserved. Users can see through the transparency to view the DPS content in the background. If this option is deselected, the web content background is used.
Allow User Interaction
If this option is selected, users can interact with the web page. For example, they can tap a hyperlink to jump to a different web page.
Scale Content To Fit
If this option is selected, the web page is scaled to fit within the size specified in the overlay file. If this option is not selected, the web page is displayed at the same size it would appear in the device’s browser, and the HTML page can be cropped.
Allow Access to Entitlement Information
You can also create this type of conditional HTML content for an HTML article instead of a Web Content overlay. For an HTML article, select the "Allow Access to Entitlement Information" option in the Folio Producer Editor.