The Accelerated Mobile Pages (AMP) project is an open-source technology offered and supported by Google. The initiative of the project stems from the desire to use a method of creating attractive web pages thanks to a fluid and almost instantaneous loading for mobile users.
To respect this method, Digiteka has developed a product adapted to thi need, AMP valid and mobile specific.
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 the AMP.
To display our videos, the client must implement a <amp-video-iframe> tag on their page. But before he can use it, he must add the following script to the header of his site:
<script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>
Then, the <amp-video-iframe> tag can be added in the body or at the bottom of an article, like any player:
<amp-video-iframe
width="640" height="500"
layout="responsive"
allowfullscreen
frameborder="0"
class="-amp-element -amp-layout-responsive -amp-layout-size-defined -amp-layout"
src="https://www.ultimedia.com/deliver/generic/iframe/mdtk/01357940/src/q0lq5mp/zone/1/showtitle/1/">
</amp-video-iframe>
This tag has several attributes that ensure the functioning and correct display of our videos:
| width, height |
Corresponds to the dimensions of the video (area size). Note: these attributes are mandatory when the value of the “layout” attribute is “responsive”. |
| layout |
Allows you 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 correspond to the width of its container element, and its height will automatically correspond to the ratios given by the width and height attributes. The available space depends on the parent element and can also be customized using the “max-width” CSS property. Note: AMP elements with "layout=responsive" attribute have no intrinsic size. The size of the AMP element is determined from its containing element. To ensure that it displays, a width and height must be specified for the container element. Do not use a "display:table" property on the latter, this will result in not displaying the contained AMP elements. |
| src |
This is the url of the <amp-video-iframe> tag. This url provides the videos according to the parameters added to it.https://amp.dev/documentation/components/amp-video-iframe/#attributes Note: The URL of the <amp-video-iframe> tag must be secure (HTTPS). |
For more details: https://amp.dev/documentation/components/amp-video-iframe/
The “src” attribute corresponds to the url of the <amp-video-iframe> tag. This url will call videos based on 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 | Corresponds to the search mode |
| mdtk | Site ID (ex: 02251419) |
| zone | zone ID |
| search |
Character string supplied by the client. This works like a MACRO in an ad tag, which is automatically filled in. This 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 of the iframe URL. Example of encoding in ASCII: https://www.w3schools.com/tags/ref_urlencode.asp |
The <amp-video-iframe> tag will only accept secure urls (HTTPS).
This is the same principle as for Smart Players integrations, the only change concerns the source (src attribute) which must correspond to the Simple Player integration URL as retrieved from our platform:
https://www.ultimedia.com/deliver/generic/iframe/mdtk/02251419/zone/1/showtitle/1/src/mqmv3s
<amp-video-iframe> is different from vanilla iframes. This tag is designed to be more secure and only works if you respect certain rules, for more details: https://amp.dev/documentation/components/amp-video-iframe/#behavior
To check if the mockup is “valid” AMP, there is a validation interface where you can submit the page url: https://validator.ampproject.org/
This will return if it is valid or if there are errors, along with the error messages. But you won't see the mockup (see d. How to - View mockup).
For more details: https://www.ampproject.org/docs/fundamentals/validate#web-interface
<amp-video-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
Embeds of the <amp-video-iframe> type can take advantage of Visible Player functionality natively.
To be able to display the Visible Player on an AMP integration, you must add the following script to the header of your site:
<script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>
In order to activate the Visible Player on your AMP integrations, you will need to add the “dock” parameter in your <amp-video-iframe> tag:
<amp-video-iframe
width="640" height="500"
layout="responsive"
allowfullscreen
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">
dock
</amp-video-iframe>
By default, the Visible Player will position itself in the upper right corner of the screen.
If you want to change this location, you can refer to the following documentation:
https://amp.dev/documentation/components/amp-video-docking/#docking-target
For more settings and features around this native AMP feature, please refer to the online documentation:
https://amp.dev/documentation/components/amp-video-docking