Youtube видео вставлять всплывающее окно воспроизведения и остановки видео - PullRequest
0 голосов
/ 08 ноября 2018

У меня есть изображение, которое при нажатии открывает видео и воспроизводит его автоматически. Решение, которое я нашел, заключается в добавлении атрибута 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...