How Do I Autoplay Vimeo Videos Without Sound?

February 16, 2017

Using video is a great way to get users on your website engaged with the content. And with video websites like Vimeo you can easily embed content onto your site without having to worry about uploading a large video file. When embedding a Vimeo video there are a handful of options for customization using their oEmbed API and it’s really easy to use by simply adding arguments to the end of the embed source string. If you’re going to use the API arguments, make sure that you enable the API before adding other arguments simply by adding the short string: “?api=1”

A somewhat common feature that is sought after is for videos to autoplay and play continuously. We can accomplish this by adding another string to our source after the enabling the API: “&autoplay=1&loop=1”

Now our source string should look something like this:
src=”https://player.vimeo.com/video/45819280?api=1&autoplay=1&loop=1″

Now our video will play automatically on page load and won’t stop playing until the user pauses it or leaves the page, which is great! But, more often than not, that video has sound playing. And when the user lands on your page, you don’t want to be blasting them with sound from a video that they didn’t start. This can cause a poor user experience and push people away from your site.

To avoid your beautiful video’s sound from scaring people away, we can use a little javascript to set the volume to 0. First, we must include a script from Vimeo’s CDN to allow us to manipulate the video player. Once included, we can write a small function that will listen for the video to be “ready” and set the volume to 0. To target that iframe we will also need to add one last string to the video source called: “&player_id=vimeo_player”

Now our source string should look something like this:
src=”https://player.vimeo.com/video/45819280?api=1&player_id=vimeo_player&autoplay=1&loop=1″

 

<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="https://player.vimeo.com/video/45819280?api=1&player_id=vimeo_player&autoplay=1&loop=1" width="100%" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<script type="text/javascript">
    var iframe = $('#vimeo_player')[0],
        player = $f(iframe);

    player.addEvent('ready', function() {
        player.api('setVolume', 0);
    });
</script>

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive