iframe src add autoplay=true parameter onclick with existing value

Question

<iframe id="iframe" src="//player.net/14965165444001/default_default/index.html?videoId=4784345556001" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>

<button>click</button>

On iframe src, when clicked the "button".. it have to add "?autoplay=true" with the present src value.

Like this I add 5 elements inside the slider.

Answer 1

Set the src of the iframe using .attr method

updateQueryStringParameter function is referred from amateur

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  } else {
    return uri + separator + key + "=" + value;
  }
}

$('#update').on('click', function() {
  var url = $('#iframe').attr('src');
  var Updatedurl = updateQueryStringParameter(url, 'autoplay', 'true');
  $('#iframe').attr('src', Updatedurl);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<iframe id="iframe" src="//player.net/14965165444001/default_default/index.html?videoId=4784345556001" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>

<button id='update'>click</button>

Answer 2

var iframe = $('#iframe');
var src = iframe.attr('src');
$('button').click(function() {
  if (src.indexOf('autoplay=true') !== -1) {
    iframe.attr('src', src + '&autoplay=true');
  }
});