Articles in this section

See more

How do I enable or disable autoplay on an inline embedded player?

Avatar
Chris Broughton
  • Updated

Overview

In Vidyard, you can set the a player to automatically play after a page loads (also known as autoplay).

If you have the same player embedded in more than one location, you can also use a query string to enable autoplay on a "per embed basis" (i.e. autoplay on a specify embed location rather than everywhere the player exists) or add additional code to read a parameter in the URL.

Solutions

Add a parameter to the Embed Code

To always enable autoplay for an embedded player, add data-autoplay="1" to the inline javascript embed code. Use data-autoplay="0" if it is set to autoplay in the Player Settings, but you would prefer it to disabled in that location.

<img
   style="max-width: 100%;"
   class="vidyard-player-embed"
   src="https://play.vidyard.com/{UUID}.jpg"
   data-uuid="{UUID}"
   data-v="4"
   data-type="inline"
   data-autoplay="1"
/>

Add a query string to a Sharing Page URL

For a sharing page, you can use a query string in the URL. The order of the query strings is not important, but the first one must start with ? and others must start with &.

https://share.vidyard.com/watch/{uuid}?autoplay=1

Add Javascript to the embed location for enabling a query string

If you would like to have the embedded player autoplay in some situations but not others, you can add the following Javascript to your page. This will target the first player on the page.

<script type ="text/javascript">
// Parsing the query string.
function get_parameter_by_name(name) {
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if (results == null) {
    return "";
  } else {
    return results[1];
  }
}

var autoPlay = parseInt(get_parameter_by_name('autoplay'));

function initApp(vyApi){
  var player = VidyardV4.players[0];

  player.on('ready', function(){
    if (autoPlay === 1) {
      player.play();
    };
  });
}

window.vidyardEmbed
? initApp(window.vidyardEmbed)
: (window.onVidyardAPI = (vyApi) => initApp(vyApi));
</script>

 

Learn more about using query strings to override player settings.

Related articles