AMP Support

Owned by Sergei Soloviev
Last updated: Apr 01, 2019
2 min read

Viqeo is supported by Google AMProject.org and has own AMP-tag <amp-viqeo-player>

AMP Project Documentation: https://www.ampproject.org/docs/reference/components/amp-viqeo-player


To implement Viqeo on AMP pages you just have to change embedded code to <amp-viqeo-player> tag with appropriate parameters.

To create an AMP export you need to change code 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="7f2b039d7c073043d927" data-profile="391" data-aspectRatio="0.5625">
        <iframe src="//cdn.viqeo.tv/embed/?vid=7f2b039d7c073043d927" width="100%" height="100%" style="position:absolute;" frameBorder="0" allowFullScreen></iframe>
      </div>
Should be replaced by AMP-tag:
<amp-viqeo-player
    data-profileid="391"
    data-videoid="7f2b039d7c073043d927"
    width="640"
    height="360"
    layout="responsive"
	autoplay>
</amp-viqeo-player>

Where:

data-profileid="391" (original code: data-profile="391")

data-videoid="7f2b039d7c073043d927" (original code: vid=7f2b039d7c073043d927 )

If you add to AMP-page external or recommendations player, there is no vid in code, so instead of using data-videoid="7f2b039d7c073043d927" —
you need to setup parameters this way:

data-videoId='{ “playerId”: 1, “videoSrc”: “video.mp4“, “previewSrc“: “preview.jpg“}'

where:

playerId - is a player id (data-playerId in player code (Settings>Players) 

videoSrc - data-videoSrc

previewSrc - data-previewSrc

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.

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 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 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

Kanobu.ru, manually played videos: