How to setup a Viously player on AMP?

Best practices

The AMP export code must be inserted high enough in the source code, in a div to which the partner must apply the position: sticky; style.

If the partner has a fixed navbar, the partner must apply a top style of the same height as his navbar to the player div container.

The partner must ensure that the position: sticky; elements do not conflict with the Viously player.

Classic integration

The AMP export code container must be a direct child of the main AMP page container.

<body>
    <nav>NavBar</nav>
    <main>
        <p>lorem ipsum...</p>

        <div class="css-sticky">
            <div class="viously-player">
                <amp-iframe>...</amp-iframe>
            </div>
        </div>

        <p>lorem ipsum...</p>
        <p>lorem ipsum...</p>
        ...
        <p>lorem ipsum...</p>
    </main>
</body>

Unstick integration

The AMP export code container must be placed in a container that stops at the point where the partner wants to trigger the unstick

<body>
    <nav>NavBar</nav>
    <main>
        <section>
            <p>lorem ipsum...</p>

            <div class="css-sticky">
                <div class="viously-player">
                    <amp-iframe>...</amp-iframe>
                </div>
            </div>

            <p>lorem ipsum...</p>
            <p>lorem ipsum...</p>
            ...
            <p>lorem ipsum...</p>
        </section>

        // Desired end of the sticky behavior

        <section>
            <p>lorem ipsum...</p>
            ...
            <p>lorem ipsum...</p>
        </section>
    </main>
</body>

You can check the MDN technical documentation for extra informations.

For any queries or assistance, please reach out to [email protected].