<style>
.ytVideoWrapper{
iframe{
position: absolute;top:0;left:0;width: 100%;height: 100%
}
position: relative;
padding-top:56.25%
}
</style>
<div class="uk-slidenav-position" data-uk-slider="{center:true}">
<div class="uk-slider-container">
<ul class="uk-slider uk-grid-width-medium-1-4">
<li class="uk-width-4-5">
<img src="images/s1.jpg" alt="" />
</li>
<li class="uk-width-4-5" style="position:relative;">
<div class="ytVideoWrapper" style="position:absolute;left:0;top:0;width:100%;height:100%;">
<iframe src="https://www.youtube.com/embed/_IKWEi9bRYI?controls=0" autoplay="true" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</li>
<li class="uk-width-4-5">
<img src="images/s3.jpg" alt="" />
</li>
</ul>
</div>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous"></a>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next"></a>
</div>
Я сделал слайдер UIkit V2 вот так. Страница в реальном времени Второй слайд - это встроенное видео YouTube. Проблема в том, что как только вы начинаете воспроизведение видео, а затем переходите к другим слайдам и скользите назад, видео будет инициировано, то есть пользователь может увидеть кнопку воспроизведения YouTube и начать воспроизведение видео снова, в то время как предыдущее воспроизведение все еще продолжается. фон. Это приведет к очень плохому взаимодействию с пользователем.
Я думаю, это потому, что UIkit создает дубликат, когда слайд выскальзывает из поля зрения, а когда слайд скользит назад, он снова загружает iframe youtube, следовательно, другое видео проигрыватель запускается.
Можно ли сделать так, чтобы видео приостанавливалось только при выдвижении и возобновлялось при движении назад?