Youtube Video einbetten Popup-Spiel und Video stoppen

stimmen
0

Ich habe ein Bild, dass beim Anklicken ein Video öffnet und spielt es automatisch. Die Lösung, die ich gefunden ist: Hinzufügen des auotplay Attributs in den iframe-Tag. Es ist jedoch zu entfernen, ist ein wenig komplizierter.

Kann jemand bitte helfen Sie mir den Code oder bietet eine einfache und effektive Lösung einstellen?

Ich habe überall gesucht, und ich verstehe nicht, warum das so kompliziert sein muss.

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

Veröffentlicht am 07/11/2018 um 23:52
quelle vom benutzer
In anderen Sprachen...                            

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