The amp-o2-player is used to embed a AOL O2 player in an AMP HTML web page.
Required Script: Importing the amp-o2-player component into the header.
HTML
< script async custom-element = "amp-o2-player"
</ script >
|
Attributes:
- data-pid: Player ID of O2 player.
- data-vid: Video ID of O2 player.
- data-bid: Playlist ID of O2 player.
- data-macros: macros of O2 player.
Example:
HTML
<!doctype html> < html ⚡>
< head >
< meta charset = "utf-8" >
< title >Google AMP amp-o2-player</ title >
< script async src =
</ script >
<!-- Import the `amp-o2-player` component -->
< script async custom-element = "amp-o2-player" </ script >
< meta name = "viewport" content =
"width=device-width,minimum-scale=1,initial-scale=1" >
< link rel = "canonical" href =
< style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</ style >
< noscript >
< style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</ style >
</ noscript >
</ head >
< body >
< amp-o2-player data-pid = "579a115aa01b4d2db062aa85"
data-bcid = "545db032e4b0af1a81424b48"
data-macros = "m.playback=click" layout = "responsive" width = "480" height = "270" >
</ amp-o2-player >
</ body >
</ html >
|
Output:
Article Tags :