点击播放youtube不能在Chrome中运行？

Question

我有如下代码：

export default class Video {
  constructor(options) {
    this.videoElement = options.videoElement;
    this.videoType = options.videoType;
    this.$playButton = $(options.playButton);

    this.HIDDEN_CLASS = 'is-hidden';

    this.onTriggerPlay = this.playVideo.bind(this);

    this.addTriggerListener();
  }

  addTriggerListener() {
    this.$playButton.on('click', () => this.onTriggerPlay());
  }

  playVideo() {
    if (this.videoType === 'youtube') {
      document.getElementById(this.videoElement).src += '&autoplay=1';
    } else {
      document.querySelector(this.videoElement).play();
    }

    this.$playButton.addClass(this.HIDDEN_CLASS);
  }
}

$(function() {
const videoElement = ($('#video-iframe').length) ? 'video-iframe' : '.js-video';

const videoOptions = {
  videoElement: 'video-iframe',
  videoType: 'youtube',
  playButton: '.js-video-button'
};

const videoPlayer = new Video(videoOptions);
});

.video-section {
    position: relative;
    max-width: 640px;
    min-height: 360px;
    -webkit-box-shadow: 0 2px 20px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 20px 0 rgba(0,0,0,.12)
}

.btn {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    margin-top: -42px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 1;
    visibility: visible;
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid;
    cursor: pointer;
    border-radius: 0;
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.4);
    box-shadow: 0 0 10px 0 rgba(0,0,0,.4);
    -webkit-transition-property: background-color,color,border-color;
    transition-property: background-color,color,border-color;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    padding: 26px 55px;
    background-color: #23087b;
    color: #fff;
    border-color: #23087b;
    -webkit-transition-property: background-color,color,border-color,opacity,visibility;
    transition-property: background-color,color,border-color,opacity,visibility;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: .4s;
    transition-duration: .4s
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-section">
  <iframe width="640" height="360" src="https://www.youtube.com/embed/v=M7lc1UVf-VE?feature=oembed&amp;controls=0&amp;hd=1&amp;rel=0&amp;showinfo=0&amp;cc_load_policy=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;disablekb=1" frameborder="0" allowfullscreen="" id="video-iframe"></iframe>
  <button class="btn js-video-button">Watch video</button>
</div>

class Video位于video.js中，并导入到index.js代码所在的$(function(){});中。

它在除Chrome之外的所有浏览器上都能正常工作。

它会重新加载视频，而不是播放它，而是显示它。

是因为以下原因：https://arstechnica.com/tech-policy/2017/09/google-chrome-block-auto-play-video/吗？

是否有任何聪明的方法可以覆盖它？

我尝试使用YT api，但无法使其正常工作。