AMP (Accelerated Mobile Pages)
Viqeo is supported by Google AMProject.org and has its own AMP-tag <amp-viqeo-player>
AMP Project Documentation: https://amp.dev/documentation/components/amp-viqeo-player/?format=websites
To implement Viqeo on AMP pages you just have to change the embed code to <amp-viqeo-player> tag with the correspondent parameters.
To create an AMP export the code which you have in your account:
Classic Viqeo code pasted by editors
<script async src="//cdn.viqeo.tv/js/vq_starter.js"></script><style type="text/css">
@media (orientation: landscape) {
.viqeo-vertical.viqeo-embed--7f2b039d7c073043d927 {
padding-bottom: 75%;
}
}
@media (orientation: portrait) {
.viqeo-vertical.viqeo-embed--7f2b039d7c073043d927 {
padding-bottom: 179%;
}
}
</style>
<div style="width:100%;height:0;position:relative;" class="viqeo-embed viqeo-vertical viqeo-embed--7f2b039d7c073043d927" data-vnd="yyyyyyyzzzzzzz" data-profile="XX" data-aspectRatio="0.5625">
<iframe src="//cdn.viqeo.tv/embed/?vid=yyyyyyyzzzzzzz" width="100%" height="100%" style="position:absolute;" frameBorder="0" allowFullScreen></iframe>
</div>
Should be replaced by AMP-tag:
<amp-viqeo-player
data-profileid="XX"
data-videoid="yyyyyyyzzzzzzz"
width="640"
height="360"
layout="responsive"
autoplay>
</amp-viqeo-player>
Where:
data-profileid="XX" is taken from original code: data-profile="XX"
data-videoid="yyyyyyyzzzzzzz" (original code: vid=yyyyyyyzzzzzzz )
width = (any width you want, i.e. 640)
height = should be taken from height video aspect ratio (data-aspectRatio)
layout="responsive" (highly recommended to keep it as "responsive")
autoplay — attribute to play videos automatically.
External / Recommendation players in AMP:
If you add an external or recommendations player to an AMP-page, there is no direct video reference so just use your playerId as a value for data-videoid parameter.
playerId can be found in a player code snippet (settings→players and widgets→'get code' button for desirable player)
Autoplay:
Autoplay option
We strongly recommend to add autoplay. This option forces video to start muted when visible, it's much better for views and engagement.
Do not forget to add AMP-script:
Do not forget
To make everything work properly add a script to your AMP-page: https://cdn.ampproject.org/v0/amp-viqeo-player-latest.js
WordPress:
To replace Viqeo standard code by AMP-tag you can use the following plugins:
https://wordpress.org/plugins/amp/
https://wordpress.org/plugins/accelerated-mobile-pages/
Important info
If <amp-viqeo-player> tag is not presented in allowed tags you can add it manually in settings file: amp/includes/sanitizers/class-amp-allowed-tags-generated.php
Examples:
Lifehacker.ru, autoplayed videos
- Usual page: https://lifehacker.ru/kak-zavyazat-platok/
- AMP-page: https://lifehacker.ru/kak-zavyazat-platok/amp/
Kanobu.ru, manually played videos: