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