YouTube embed doesn't autoplay on initial load. Will autoplay on refresh

This is the live website with the issue: thebishops.band

When I set mute=1, autoplay on initial load works. But I need the audio to play.

Using data-property vs. <iframe/>.

Here is the html:

<section class="intro full-width full-height jIntro" id="anchor00">
  <div class="container">
    <div class="row">
      <div class="col-md-12">

    <div class="playerVideo" data-property="{videoURL:'LH-Jm6QdebU',showControls:false,containment:'self',autoPlay:1, mute:false, startAt:0,opacity:1,ratio:'4/3', addRaster:true}"> <!-- Slider -->
        <a href="#" class="play-video">Play/Pause</a>
    </div>

      </div>
    </div>
  </div>
</section>

Thanks for the help.

Solution

With the recent YouTube API update and browsers vendor policy, you can’t autoplay a video if the audio is on. Following is the excerpt from the update:

Chrome's autoplay policies are simple:

Muted autoplay is always allowed.

Autoplay with sound is allowed if:

User has interacted with the domain (click, tap, etc.).

On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.

On mobile, the user has [added the site to their home screen]. Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

I believe you are using jquery.mb.YTPlayer library. It has a workaround that if the autoplay is set to true and the audio is not muted the video start once the user has the first click/touch interaction with the page.