Introduction: iframe video are inline frame videos which are embedded in HTML pages but in AMP HTML we use a component called amp-iframe-video to embed videos into pages with amp-iframe-video we can embed a custom-built video player using JavaScript.
Required Script: Importing the amp-video-iframe component into the header.
< script async custom-element = "amp-video-iframe" src =
</ script >
|
Attributes:
- src: Specifies the URL or path of the iframe video that is to be embedded.
- poster: Points to a Image URL while the video loads. This is a required attribute.
- implements-media-session: If the iframe should implement a MediaSession API then this attribute should be specified.
- implements-rotate-to-fullscreen: This attribute as True when the document inside the iframe implements rotate to full screen independently.
- autoplay: If this attribute is set then the video will start to play as soon as the video loads.
Example:
html
<!DOCTYPE html> < html amp>
< head >
< meta charset = "utf-8" />
< title >GeeksforGeeks amp-video-iframe</ title >
< link rel = "canonical" href =
< meta name = "viewport" content=
" width = device -width,
minimum-scale = 1 ,
initial-scale = 1 " />
<!-- Include the `amp-video-iframe` component -->
< script async custom-element = "amp-video-iframe" </ script >
< 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 >
< script async src =
</ script >
</ head >
< body >
< amp-video-iframe id = "myVideo" src =
"/static/samples/files/amp-video-iframe-videojs.html" width = "6000" height = "405"
layout = "responsive" autoplay>
< amp-img placeholder src =
"/static/samples/img/amp-video-iframe-sample-placeholder.jpg" layout = "fill" >
</ amp-img >
</ amp-video-iframe >
</ body >
</ html >
|
Output: