How to make your video autoplay every time

Are you trying to find out how to have your auto playing videos work every time? Do your videos start muted, or they maybe do not start at all? We will explain why this happens, how you can plan your video as well as what to look for.

Here at Ziggeo we do our best to provide the best possible experience for our customers when it comes to playback and recording of video. We took the same approach for audio and images. For autoplay that required several different things to be added, however mostly they affect video.

We want to explain where the issue comes from, why these limitations exist and how to live with them.

So the first thing to understand is that the issue does not come from code. There are some very specific cases where it could, however it is very unlikely that you would create such codes by mistake. So where do they come from? Well from browsers. They impose these limitations on video and they actually do it for good reason. Knowing this let's get familiar with the "why".

Why the browsers have limitations?

What is the first thing you think about when you hear "ads on a website". Well most people starting thinking "annoying". True if you are setting your own ads you will likely be thinking of something else, however there are so many unwanted ads on the internet that someone might just want to do something about it.

Well browser vendors did. They did it when ads were in Flash and they are doing much more of the same now, when Flash is no longer available.

They want to stop the ads being shown in almost all cases. Mostly because the ads will add additional cost to network bandwidth for the end user. Now, that said, ads are part of the internet and not all of the ads are bad. So we all want some ads, however not all. One of the possible scenarios is the use of ad blockers. Done, solved, let's move on… Well not quite.

The benefit of using the ad blocker is that you can fine tune what websites to show ads to you and which ones to hide. They however run on top of the different browser engines and are quite often CPU intensive. On mobile devices they might not be available or would require greater insight into where you are going. So great option, however in a world where browser vendors want to show their browser as high speed and reliable, adding something that uses a lot of resources is not a way to go.

This is where the mystery comes from. Different browsers will use different techniques in detecting what is OK and what is not. Goal being to not require you to use ad blockers, provide stable and fast platform and do it all themselves. For example Google published that they do not really want video to be smaller than 200x140.

If the video is smaller than 200x140 then you are definitely showing an add to your visitors.

Other browsers are using their own size values, however they are always smaller resolutions. The size is just one of the factors that say that the video is relevant.

How to seem relevant?

The size is first. If your video is small the browser will know. You can easily add padding to the video itself to seem larger, however that would be just part of it.

Of course you do really want to have at least 640x480 video or larger. In most cases anything smaller than that will show pixelated.

Now if you are in real-estate you will know the most important aspect of it: Location, Location, Location. Well same is with the video placement. HTML5 specification wants to help you by providing you with different elements such as "aside" element. This element helps you separate the useful links and other details that are not too relevant to the main content (article) of your post. Sound good? Yup, it is. It helps optimize things and one such optimization is to exclude the content that is in aside. Quick way to relate to what we mean is by clicking on the "Read View", which just shows you the most important text and hides the rest.

Similar to it, and likely using some parts of the same codes, will mute or even disable your video.

So make sure that your video is located in a place where it is more obvious that the video is major part of your content. Then remember the size and make the video as wide as you like (more the better).

For other points that can help you we will first need to understand different types of autoplays we could have.

Autoplay types

You can use or abuse autoplay in many different ways. You could have:

  1. Autoplay that starts on page load
  2. and autoplay that starts with sound
  3. Just the same, autoplay that starts without a sound
  4. and then there is also autoplay within subdocument.
  5. Autoplay with interaction and
  6. autoplay without interaction
  7. Let us not forget top content video and
  8. the underlying video content or "background video".

They are all similar, however they are just enough different in their execution and some of those types can mix with one another.

For example the autoplay that starts on page load. This is very common type of autoplay. It will cover the top content video and background video. What is very important is the volume of it. If the volume is set at 100% the video might just be disabled in some browsers.

This is why we at Ziggeo have tests that see if the video can be played at 100% during autoplay. If it can not then, what about 50%? Still no? Well then we mute the video. This is normal and you will actually see services such as YouTube as well as social platforms like Facebook and Instagram start the playback of the video as muted. Then once you tap it, the video is unmuted and ready to be "consumed".

If you want your video to play every time, consider setting the volume to 0 or 10% and not higher. Once there is some interaction between the person on the page and your code, there are many more options for you available.

Now if the video playback is happening within the sub-document there are few more things to consider. First is that your sub-document has to be allowed to do this. By "sub-document" we are referring to for example iframes. The iframes have the allow parameter (WebKit based browsers such as Chrome), which require autoplay to be allowed first.

For example see this code:

<iframe src="page-with-video.html" allow="autoplay"></iframe>

That should not just be part of your own iframe, that has to be part of all iframes above it all the way to the parent document. If this is not the case, then it does not matter that your iframe has autoplay as the permissions are given in top -> down order.

Last part to consider are background videos. You can have many great design implementations with the video in the back of your content. The great benefit of it is that video can say so much more than the image or text could. Often you can see the video in the header explaining you quickly what you will see on the page.

Now the background video is generally best to be started and left muted. The reason is that anyone on your website will not really be able to access the controls and disable or mute the video. While browsers will not directly punish you for that, your visitors will likely just close the tab and leave. So for video playback behind some content, always consider muted video. Is there more?

"the more" to consider

Who knew that the video playback that starts on page load could be so complex right? Well, we hear you. That is why we are doing as much as we can by ourselves, giving you options to change anything you would like.

Here we will quickly go through different elements that you need to be aware of when playing video. Browsers will actually try to analyze the content that you are playing and how. They will do this by checking the way the end user is interacting with your video. For example there will be a different experience for the person that mutes your video right away and then visits a different page compared to a person that did not. This is because the browser is trying to understand that someone does not really want to hear the audio right away.

Many people think that browsers are our tools, however that is only true when we are using the browser to get us to places. When we are in a role of the website owner, the browsers are not our tools, they are the tools of the visitors. As such they will look to provide the best experience for their users (the visitors). If the video started to play loud and you are about to go to sleep and tap to mute it, well the browser will not want to start the next video with full volume again.

Likewise the video will not really play back as autoplay with sound if all you did was play a second or two of the video on previous page.

Some browsers will also check if you are on the page where the video playback has been started. Depending on the other aspects at that moment, if the tab is not active they could block the video, or they could just mute the sound.

How to set things up?

Now we know key points: video size, video player placement, the type of autoplay we are after and we also have visitors just waiting to come to our page. Great. All we are left to do is to add it so that autoplay works for us every time - exactly as we planned it to do.

With Ziggeo you have the benefits of listening to various events and calling the methods directly from your code. So here we will show you an example how you can show the "tap to unmute" button over your video player if the playback starts muted.

First we will need to player:

<ziggeoplayer id="ziggeo-player"
              ziggeo-theme="modern"
              ziggeo-themecolor="blue"
              ziggeo-width="100%"
              ziggeo-video="_video_key">
</ziggeoplayer>

Now, we want to know when the playback has started so that we can see if there is any audio. To do that we will listen to one of our events.

The event of interest is "playing". We would listen for our player and when it fires the same and to do that, we first need to get the reference to our player.

var element = document.getElementById('ziggeo-player');
var player = ZiggeoApi.V2.Player.findByElement(element);

Now, we would need to start listening to our event, and we would do that like so:

player.on("playing", function () {
});

Now every time the player starts to play the video the event will fire, and we can react to it in any way we want.

The easiest way is to just show existing element. This element can be above, under or over our player. That is completely up to you. To make it simple, let us say that the element has the following code:

<div id="unmute">tap to unmute</div>

Now this element should be hidden by default and shown if the video is actually muted. For that we can use one of our methods to determine current volume.

if(player.soundLevel() <= 0) {
    document.getElementById('unmute').style.display = 'block';
}

And now the final piece of the puzzle - making it increase the volume.

document.getElementById('unmute').addEventListener('click', function(e) {
    player.set_volume(1);
    document.getElementById('unmute').style.display = 'none';
});

That is it. Let us see how the entire code looks like:

<div id="unmute">tap to un-mute</div>
<ziggeoplayer id="ziggeo-player" ziggeo-theme="modern" ziggeo-themecolor="blue" ziggeo-width="100%" ziggeo-video="_video_key"></ziggeoplayer>

<script>
    var element = document.getElementById('ziggeo-player');
    var player = ZiggeoApi.V2.Player.findByElement(element);

    player.on("playing", function () {
        if(player.soundLevel() <= 0) {
            document.getElementById('unmute').style.display = 'block';
        }
    });

    // We can attach this event at any time, adding it here, allows us to do it just once
    document.getElementById('unmute').addEventListener('click', function(e) {
        player.set_volume(1);
        document.getElementById('unmute').style.display = 'none';
    });
</script>

How was your experience following through this simple guide? Did you like the information at the start? Reach out and let us know by sending an email to our support team at support@ziggeo.com and let us know if you would like to get more blog posts like this one.

PREV NEXT