Youtube videa vložit vyskakovací přehrávání a zastavení videa

hlasů
0

Mám obrázek, který po klepnutí otevře video a automaticky přehraje ji. Řešení jsem našel je: přidání atribut auotplay do značky iframe. Nicméně, jeho odstranění je trochu složitější.

Může mi někdo prosím, pomozte mi nastavit kód nebo více jednoduché a účinné řešení?

Jsem hledal všude a já nechápu, proč to musí být tak složité.

// 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>

Položena 07/11/2018 v 23:52
zdroj uživatelem
V jiných jazycích...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more