Help embedding AMP iframe code within InDesign for online publishing

Report · Aug 27, 2024

Hi, I produce digital programmes for sporting events using InDesign and using Adobe’s Publish Online platform. I’ve been working with Opta to try and include one of their live stats widgets into the programme but haven’t managed to get the integration to work so far. Below is an example of the AMP iframe code supplied:

<amp-iframe width="800" height="300" sandbox="allow-scripts allow-same-origin" resizable frameborder="0" src="https://secure.widget.cloud.opta.net/v3/amp.html?w=widget~matchday_live¦competition~8¦season~2024¦match~2444470¦template~normal¦live~false¦orientation~horizontal¦side~both¦show_match_header~true¦show_crests~false¦show_pitch_crests~false¦show_team_formation~true¦show_score~true¦show_halftime_score~false¦show_competition_name~true¦show_date~true¦date_format~dddd D MMMM YYYY¦narrow_date_format~DD/MM/YY¦show_referee~true¦show_venue~true¦show_attendance~true¦show_images~false¦show_pitch_images~false¦show_team_sheets~true¦show_event_icons~true¦show_player_names~true¦show_player_stats~true¦show_subs~all¦competition_naming~full¦team_naming~full¦player_naming~full¦show_live~false¦show_logo~true¦show_title~true¦breakpoints~400, 700¦sport~football&s=bc62239b7bdd0b91d0812b2e0ce02fb4&t=Europe%2FLondon&l=en_GB">

<div overflow role="button" aria-label="Show more">Click to show more</div>

</amp-iframe>

Attached is a screenshot of how the widget should display.

Any help with this would be greatly appreciated.

Report · Aug 27, 2024

It doesn't work on its own - so there is some extra code needed?

Report · Aug 27, 2024

Hi Robert, thank you for your reply.
This is the extra info...

Copy the amp-iframe makrup below and paste it into your amp web page.

Your amp web page needs to have the amp-iframe script <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> embedded for the amp-iframe to work.

There are also behaviours imposed by the amp orject that influence the loading of an amp-iframe. For the offical amp-iframe documentation seeamp-iframe - AMP

Any ideas on how you can make this work if the widget is not being embeded into a web page?

There is also an option for a standalone page but the code is not iframe and I'm not sure how to make this work either:

<opta-widget widget="matchday_live" competition="8" season="2024" match="2444470" template="normal" live="false" orientation="horizontal" side="both" show_match_header="true" show_crests="false" show_pitch_crests="false" show_team_formation="true" show_score="true" show_halftime_score="false" show_competition_name="true" show_date="true" date_format="dddd D MMMM YYYY" narrow_date_format="DD/MM/YY" show_referee="true" show_venue="true" show_attendance="true" show_images="false" show_pitch_images="false" show_team_sheets="true" show_event_icons="true" show_player_names="true" show_player_stats="true" show_subs="all" competition_naming="full" team_naming="full" player_naming="full" show_live="false" show_logo="true" show_title="true" breakpoints="400, 700" sport="football"></opta-widget>

Report · Aug 27, 2024

The SRC from your initial code example, when pasted into a browser's address - works.

But I can't even create sample html local file that will display ANYTHING using amp-iframe?

Report · Aug 27, 2024

I don't know if you need an extra priviledges or something - but even this:

<!DOCTYPE html>
<html>
<head>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head><body>

<h1>My First Heading</h1>
<amp-iframe width="200" height="100" border="1" 
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    src="www.id-tasker.com">
</amp-iframe>
<h1>My Second Heading</h1>
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

</body>
</html>

gives me only spinning circle:

And only because I've inlcuded link to two scripts - in the "<head>" section - and WITHOUT "https://" in the src address of my website.

Report · Aug 27, 2024

Hi Robert,

When you say the initial code works in a browser did you mean this one?
<amp-iframe width="800" height="300" sandbox="allow-scripts allow-same-origin" resizable frameborder="0" src="https://secure.widget.cloud.opta.net/v3/amp.html?w=widget~matchday_live¦competition~8¦season~2024¦match~2444470¦template~normal¦live~false¦orientation~horizontal¦side~both¦show_match_header~true¦show_crests~false¦show_pitch_crests~false¦show_team_formation~true¦show_score~true¦show_halftime_score~false¦show_competition_name~true¦show_date~true¦date_format~dddd D MMMM YYYY¦narrow_date_format~DD/MM/YY¦show_referee~true¦show_venue~true¦show_attendance~true¦show_images~false¦show_pitch_images~false¦show_team_sheets~true¦show_event_icons~true¦show_player_names~true¦show_player_stats~true¦show_subs~all¦competition_naming~full¦team_naming~full¦player_naming~full¦show_live~false¦show_logo~true¦show_title~true¦breakpoints~400, 700¦sport~football&s=bc62239b7bdd0b91d0812b2e0ce02fb4&t=Europe%2FLondon&l=en_GB">

<div overflow role="button" aria-label="Show more">Click to show more</div>

</amp-iframe>

Report · Aug 27, 2024

No, only what is between " " of the src.

https://secure.widget.cloud.opta.net/v3/amp.html?w=widget~matchday_live¦competition~8¦season~2024¦match~2444470¦template~normal¦live~false¦orientation~horizontal¦side~both¦show_match_header~true¦show_crests~false¦show_pitch_crests~false¦show_team_formation~true¦show_score~true¦show_halftime_score~false¦show_competition_name~true¦show_date~true¦date_format~dddd D MMMM YYYY¦narrow_date_format~DD/MM/YY¦show_referee~true¦show_venue~true¦show_attendance~true¦show_images~false¦show_pitch_images~false¦show_team_sheets~true¦show_event_icons~true¦show_player_names~true¦show_player_stats~true¦show_subs~all¦competition_naming~full¦team_naming~full¦player_naming~full¦show_live~false¦show_logo~true¦show_title~true¦breakpoints~400, 700¦sport~football&s=bc62239b7bdd0b91d0812b2e0ce02fb4&t=Europe%2FLondon&l=en_GB

Report · Aug 28, 2024

Any idea of what changes I could make to the html to be able to embed it into an InDesign page?

Report · Aug 28, 2024

Any idea of what changes I could make to the html to be able to embed it into an InDesign page?

By @D365966216vxm

Maybe, if we can make it work on a simple HTML page first ...