Youtube βίντεο ενσωματώσετε αναδυόμενο παιχνίδι και να σταματήσει το βίντεο

ψήφοι
0

Έχω μια εικόνα ότι όταν κάνετε κλικ, ανοίγει ένα βίντεο και να παίζει αυτόματα. Η λύση που βρήκα είναι: προσθέτοντας το χαρακτηριστικό 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>

Δημοσιεύθηκε 07/11/2018 στις 23:52
πηγή χρήστη
Σε άλλες γλώσσες...                            

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