Help embedding AMP iframe code within InDesign for online publishing

Forum|Forum|1 year ago
August 27, 2024
1 reply
638 views

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.

This topic has been closed for replies.

Robert at ID-Tasker

Legend

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

D

D365966216vxmAuthor

Participant

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>

D

D365966216vxmAuthor

Participant

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.

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>

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded