Login

Help

Documentation

How to display video in a Browse Grid cell?

Twixl Support Team Updated: - Created :

    If you want to display video inside a Browse Grid cell in article-based apps, read this KB-article!

    In short

    Basically, you need to wrap a video inside a HTML document using either an Inline Web Viewer or an Embedded Viewer and add an option to the <video> tag.

    How to

    1. Create a .html-file with a link to the video (example below).
    2. Link to any video-source (e.g. Vimeo)
    3. Add the playsinline option to the <video> tag. This disables the full screen on phones and this way, the video will be played inside the Browse Grid Cell.
    4. Create an Inline Web Viewer or an Embedded Web Viewer. See Working with content items for more info.
    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Inline Movie</title>
     <style>
     body { margin: 0; padding: 0; }
     </style>
    </head>
    <body>
     <video autoplay="" src="THE-LINK-TO-YOUR-VIDEO" type="video/mp4" class="media-document iPhone video" playsinline width="100%" height="100%"></video>
    
    </body>
    </html>