YouTube视频嵌入弹出窗口播放和停止视频

Question

我有一个图像，单击该图像可打开视频并自动播放。我发现的解决方案是：将auotplay属性添加到iframe标记。但是，删除它比较麻烦。

有人可以帮助我调整代码或提供更简单有效的解决方案吗？

我到处搜索过，我不明白为什么它必须如此复杂。

// Hero-09
$('.hollow-hero-09 .popout').css('display', 'flex').hide()

$('.hollow-hero-09 #popControl').on('click', function (e) {
    e.preventDefault()
    $('.hollow-hero-09').addClass('play')
    $('.hollow-hero-09 .popout').fadeIn()
    $('.hollow-hero-09 iframe')[0].src += '&autoplay=1'
})

const hide = () => {
    if ($('.hollow-hero-09').hasClass('play')) {
        $('.hollow-hero-09').removeClass('play')
        $('.hollow-hero-09 .popout').fadeOut()
        $('.hollow-hero-09 iframe')[0].src -= '&autoplay=1'
    }
}

$('.hollow-hero-09 .popout').on('click', function () {
    hide()
})

$(document).on('keydown', function (e) {
    if (e.keyCode === 27) {
        hide()
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hollow-hero-09">
    <div class="flex-container">
        <div class="text">
            <h1>Welcome to Genesis Partners Group</h1>
            <h3>Strategic Solutions To Your Real Estate Problems</h3>
        </div>
        <div class="img-wrap">
            <img src="https://genesispartnersgroup.com/site/wp-content/uploads/videoShot.jpg" alt="">
            <button class="playButton">
                <i class="fa fa-play"></i>
            </button>
            <div class="caption">
                <p>Sharon's Story</p>
            </div>
            <a id="popControl" href="#"></a>
        </div>
        <div class="popout">
            <iframe width="756" height="420" src="https://www.youtube.com/embed/-cjVIgirt04?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
    </div>
</div>