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

Question

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.

Answer 1

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.