CODEWITHSUNDEEP
javascriptjqueryhtmlvimeourl-parameters
tpitman
tpitman

Reputation: 73

Set video embedded in page to autoplay or not, based on query string?

Is it possible to set a video embedded on a page to autoplay based on a query string on the URL of the page it's embedded on?

For instance, if I have a page at bla-blah.web/interthingy.html with a Vimeo embed, is it possible to make it so bla-blah.web/interthingy.html?play or bla-blah.web/interthingy.html?play=true so that the Vimeo embed contained within that page autoplays?

Basically something that reads the URL, and sets the embedded video to autoplay based on whether it has a specific query string.

My apologies if this has been asked and answered elsewhere; I can't seem to find anything on it.

Upvotes: 0

Views: 849

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

A solution can be based on the window.location.search.

Using the split and filter it's possible to search the query parameter play and its value.

If this parameter exists and the value is not specified or true it's possible to play the Vimeo video:

var playParams = window.location.search.split('&').filter(function(ele, index) {
  var tmpArr = ele.split('=');
  if (tmpArr[0] == '?play' || tmpArr[0] == 'play') {
    if (tmpArr.length == 2) {
      return tmpArr[1] == 'true';
    }
    return true;
  }
});

if (playParams.length > 0) {
  var iframe = document.querySelector('iframe');
  var player = new Vimeo.Player(iframe);

  player.play();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>



<iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Upvotes: 1

Related Questions