Autoplay videos automatically start playing without requiring any action from the viewer. When a webpage or application with an autoplay video is loaded or accessed, the video begins to play automatically, usually with the sound muted. Autoplay videos are commonly used on websites, social media platforms, and digital advertising to capture the viewer's attention and deliver content without the user manually pressing the play button.

Since Uncode 2.8.0, new autoplay video options have been introduced for the Posts module, the Media Gallery (and Lightbox), and the Single Media module.

Thanks to these new options, it's possible to create:

1. Media Galleries with autoplay video;
2. Media Galleries with short autoplay videos that, when clicked, open the full video in a Lightbox;
3. Thumbnails for posts and portfolios with autoplay video;
4. Thumbnails for posts and portfolios with autoplay video on hover and a starting Poster Image;
5. Autoplay video without controls that can be included on a page to create dynamic experiences.

Media Options

First, it is important to note how each video element, when imported into the Media Library, has practical fields available that link it to other media and extend its functionality:

• Media Poster (Image ID): with a Media Poster, you connect a media as a 'cover' image to create beautiful portfolio pages, create complex grid layouts, and open your media in a Lightbox, screenshot ;
• Loop Poster (Video ID): with the Loop Poster, you can add a small video that acts as a teaser for the main video. Through this Loop Poster, you can, in fact, show a short loop in the thumbnail, and once you click on this, open the main full video in a Lightbox, screenshot ;

Please note that the ID is the identification code for each media in the Media Library; it can be copied from inside the Media Library by clicking on the item and copying it from the URL.

Advanced Video Settings

This option is on Posts and Media Gallery at the bottom of the Module tab and Single Media at the bottom of the Aspect tab. When activated, a new Videos tab appears with specific options. Through the combination of these options, different behaviors can be set, screenshot ;

• Desktop Play Hover: activate this option to have videos that start on hover when a Poster Image is set;
• Desktop Play Last Frame: activate this option to have videos that restart from the last frame played. Otherwise, they restart from the beginning;
• Mobile Behavior: set the mobile behavior, it's possible to have an autoplay video or replace it with the Poster Image (suggested option if you have multiple videos on the same page or if the videos are heavy).

Lightbox options

When you enable the Advanced Video Settings option if the module supports Lightbox, new options for managing videos will be present at the bottom of the Lightbox tab, screenshot ;

• Autoplay Videos: set the autoplay;
• Mute Videos: set the mute option.

Examples

Autoplay on hover with Poster Image (Posts module example)

Here you can see an example of a Portfolio with videos that start on hover: Portfolio Video Cover

To recreate this functionality:

1. Import a video in the Media Library, and apply the Poster Image to the video, screenshot ;
2. Insert the video into the single Portfolio page in the Media, screenshot ;
3. Please set the Media element Featured Media and Poster options in the Posts module. Note: use Poster if you want to have, as in the example, a Poster Image and the video at hover; alternatively, select Original if you want to have the video without the Poster Image, screenshot ;
4. Enable the Advanced Video Settings option, screenshot ;
5. Set the following options in the Videos tab, screenshot ;

Autoplay with Loop Poster (Media Gallery example)

Here you can see an example of an autoplay video with a Loop Poster (a small teaser video is used in the thumbnail that, when clicked, opens the full video in a Lightbox): Portfolio Video Shots

To recreate this functionality:

1. Apply to the video a Poster Image (which can be used for mobile fallback) and the Loop Poster video (a small excerpt of the video that needs to be uploaded to the Media Library), screenshot ;
2. Please set the Media element Featured Media and Original options in the Posts module, screenshot ;
3. Enable the Advanced Video Settings option, screenshot ;
4. Set the following options in the Videos tab, screenshot ;

Autoplay Single Media (Single Media example)

On this page, you can see an example of an autoplay video without controls: Creative Product

To recreate this feature:

1. Import a video into the Media Library and insert it into the Single Media Module, screenshot ;
2. Enable the Advanced Video Settings option, screenshot ;
3. Set the following options in the Videos tab, screenshot ;