add autoplay to youtube iframe on button click jquery not working

user_10250203 0
Viewed 3183

I am using custom buttons to keep my design consistent. I have added a button which is layered on top of the iframe using the z-index property in CSS. Onclick the iframe reacts but does not begin to play. I have used this code on other websites and it worked fine.

This code works in Safari but not in Chrome. I am not sure if maybe I should try re-installing Chrome.

I have also added 1 other lines which I have tried (commented out). Can anyone suggest why this is not working on chrome?

$('#playLucid').click(function() {
  $('#playLucid').css('display', 'none');
  //$("#expose").attr('src','https://www.youtube.com/embed/7bU-x8pJbig?autoplay=1');
  $("#expose")[0].src += "?autoplay=1";
});
jquery
2 Answers

This May Work:

<iframe type="text/html" 
    src="https://www.youtube.com/embed/..?autoplay=1" frameborder="0" 
    allow="autoplay">
</iframe>

If it doesn't work, try adding mute=1 or muted=1:

src="https://www.youtube.com/embed/..?autoplay=1&mute=1
user_98106760

The Solution is to add autoplay after clicking your button, this is an example:

$('#button-open-video').click(function(event) {
    var video = $('#youtube').attr('src');
    $('#youtube').attr('src', `${video}&autoplay=1`)  // adding autoplay to the URL
    $('#video').css('display','block');
});

For More Details see this example: Click Here

Good luck

user_110180060
Related