The AMP (Accelerated Mobile Pages) project is an open source technology proposed and supported by Google. The initiative of the project stems from the desire to use a method of creating attractive web pages through a fluid and almost instantaneous loading for mobile users.
To comply with this method, Digiteka has developed a product adapted to the need, valid AMP and specific mobile.
For more information: https://www.ampproject.org/docs/
The player will display an iframe containing our videos on the client's page, respecting the technical specifications of AMP.
Use a valid Digiteka AMP player
To display our videos, the client must implement an <amp-iframe> tag on their page. But before they can use it, they need to add the following script to the site's header:
<script async custom-element="amp-iframe"
src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
The <amp-iframe> tag
Then, the <amp-iframe> tag can be added in the body or at the bottom of an article, like a usual smart player :
<amp-iframe
width="640" height="500"
layout="responsive"
resizable
allowfullscreen
scrolling="no"
sandbox="allow-scripts allow-same-origin allow-popups"
frameborder="0"
class="-amp-element -amp-layout-responsive -amp-layout-size-defined -amp-layout"
src="https://www.ultimedia.com/deliver/widget/getwidget?
&widget=smart&mdtk=02251419&zone=1&search=Emmanuel%20Macron">
<div overflow></div>
</amp-iframe>
This tag has several attributes that ensure the proper functioning and display of our videos:
width, height Corresponds to the dimensions of the video (zone size).
Note: these attributes are mandatory when the value of the "layout" attribute is "responsive".
Allows to easily control the rendering of the iframe on the screen.
https://www.ampproject.org/docs/design/responsive/control_layout#the-layout-attribute
Responsive" value: The width of the iframe will match the width of its container element, and its height will automatically match the ratio given by the width and height attributes. The available space depends on the parent element and can also be customized using the CSS property "max-width".
Note: AMP elements with the attribute "layout=responsive" have no intrinsic size. The size of the AMP element is determined from its container element. To make sure it displays, a width and height must be specified for the container element. Do not use a "display:table" property on the container element, as this will result in the AMP elements contained within not being displayed.
resizable
Allows the <amp-iframe> tag to be resizable at runtime (client side).
https://www.ampproject.org/docs/reference/components/amp-iframe#iframe-resizing
<div overflow>
Child element of the <amp-iframe> tag that allows a resize request to be sent. Clicking on the <div overflow> element will resize the <amp-iframe> element.
https://www.ampproject.org/docs/reference/components/amp-iframe#iframe-resizing
allowfullscreen, frameborder
Allows full screen and sets the iframe border to 0.
https://www.ampproject.org/docs/reference/components/amp-iframe#srcdoc,-frameborder,-allowfullscreen,-allowpaymentrequest,-allowtransparency,-referrerpolicy
Gives permissions to the contents of the <amp-iframe> tag to execute Javascript.
https://www.ampproject.org/docs/reference/components/amp-iframe#sandbox
"allow-scripts allow-same-origin": allows the iframe to execute Javascript, create non-CROS XHR requests and write/read cookies.
"allow-popups": allows the creation and opening of a popup from a sanboxed iframe.
src
This is the url of the <amp-iframe> tag. This url provides the videos depending on the parameters that are added to it. (See 2. or 4. )
https://www.ampproject.org/docs/reference/components/amp-iframe#src
Note: The url of the <amp-iframe> tag must be secure (HTTPS).
https://www.ampproject.org/docs/reference/components/amp-iframe#behavior
For more details: https://www.ampproject.org/docs/reference/components/amp-iframe
SRC attribute - Smart Player
The "src" attribute corresponds to the url of the <amp-iframe> tag. This url will call the videos according to parameters.
https://www.ultimedia.com/deliver/widget/getwidget?
&widget=smart&mdtk=02251419&zone=1&search=Emmanuel%20Macron
The parameters explained here are necessary to guarantee a search result.
widget matches the search mode
mdtk Site ID ( ex : 02251419 )
zone ID of the zone
search
String of characters provided by the client.
This works like a MACRO in an ad tag, which is automatically filled in. It can be the title, the description, the content of the H1 tag etc.
Note: The client must encode this string in ASCII characters before passing it as a parameter to the iframe url.
Example of ASCII encoding : https://www.w3schools.com/tags/ref_urlencode.asp
HTTPS
The <amp-iframe> tag will only accept secure urls (HTTPS).
Setting up the player on Ultimedia
The player is configured as a "classic" player via the settings form: https://www.ultimedia.com/admin/widget/settingwidget
Two fields are used to manage the player design: "layout" and "widget_title". The AMP player displays only a title and a video.
The "layout" field must be set to "single_amp".
The other fields can be set normally (mode, index, date ...).
SRC attribute - Simple Player
As for the Smart Player, This is the same principle as for a smart player implementation, only the source (src attribute) corresponds to the url of a video hosted on Ultimedia:
https://www.ultimedia.com/deliver/generic/iframe/mdtk/02251419/zone/1/showtitle/1/src/mqmv3s
AMP mockup, implementation & validation
How to - Integration & behavior
<amp-iframe> is different from vanilla iframes. This tag is designed to be more secure and only works if certain rules are followed:
<amp-iframe> can't be placed too close to the top of the page.
<amp-iframe> must be 600 pixels away from the top of the page or not in the first 75% of the viewport when scrolling up, whichever is smaller.
For more details: https://www.ampproject.org/docs/reference/components/amp-iframe#behavior
How to - Validation
To check if the template is "valid" AMP, there is a validation interface where you can submit the url of the page: https://validator.ampproject.org/
This will return if it is valid or if there are errors, with error messages. But you won't see the template (see d. How to - See the template).
For more details: https://www.ampproject.org/docs/fundamentals/validate#web-interface
Note: if the .b is not respected, the template will not be valid AMP.
Responsive disclaimer: width, height, layout, resizable
<amp-iframe> must have a specified width and height to define a ratio that will allow the video to resize according to the available space on the page.
For more details: https://www.ampproject.org/docs/design/responsive/control_layout#supported-values-for-the-layout-attribute