Autoplay on sales pages

Browsers by default do not allow autoplay of videos where the video with sound (does not mute). This is a policy to improve the user experience, see more on Chrome blog. In this way, on a sales page, what we want is for the visitor to be engaged as quickly as possible in the content, especially in video. The video can only be displayed with autoplay with sound if the user interacts with the page, that is, one click is enough for the browser to allow the video to be played with audio.

We need to remind the user to click on the video for autoplay to work. So we can start a video with mute and with a big warning ask the user to click on the video. This feature increases your conversion on sales pages as it creates greater user engagement.

How to implement?

Some features are only available by modifying embed code. When you copy embed code from Panda's dashboard, notice what part of the code is inside src. This is the block that controls the player and its behavior. To activate the mutedIndicator (mute indicator) we need to add some parameters in the embed code (soon this will be on the platform in a simpler way).



Some parameters must be added:

autoplay = true
muted = true
mutedIndicatorIcon = true
mutedIndicatorClickRestart = true
mutedIndicatorTextTop = Top text
mutedIndicatorTextBottom = Bottom Text
saveProgress = false
controls = play-large

With the above parameters, the video will start with autoplay, muted and with the muted indicator (mutedIndicator). When clicking on the icon, the video restarts (without reloading, because of the mutedIndicatorClickRestart parameter) and without saving the video progress (saveProgress). The controls were also removed, leaving only the play-large (play control) so as not to distract the user.

So, the final code is:

<div style="position:relative;padding-top:56.25%;"><iframe id="panda-player" src="https://player-vz-ded14ebd-85a.tv.pandavideo.com.br/ embed/?v=3b101f05-84aa-4de0-9b64-71f1855388af&muted=true&autoplay=true&mutedIndicatorIcon=true&mutedIndicatorTextTop=Top text&mutedIndicatorTextBottom=Bottom text&saveProgress=false&mutedIndicatorClickRestart=true&controls=play-large:none; style:top: 0;height:100%;width:100%" allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture" allowfullscreen=true></iframe></div>

Note that at the end, added the part &muted=true&autoplay=true&mutedIndicatorIcon=true&mutedIndicatorTextTop=Top text&mutedIndicatorTextBottom=Bottom text&saveProgress=false&mutedIndicatorClickRestart=true&controls=play-large. Of course, you can change the text that goes on top and bottom as you like.

It is important to say that in controls you can put any of the values ​​separated by comma to enable the player controls like play-large,play,progress,current-time,volume,captions,settings,pip,fullscreen.

Got any questions or want to know more?

Just call us in our support chat and our team will do their best to solve your doubts or difficulties? Already use Panda Video? If not, know that both our player and our prices are unbeatable, if you are interested, take a look at our plans, in this way, it may be that some of them make sense with your product and as a gift you will still become another little panda. 🐼

Updated on: 09/18/2024