Почему не работает перемещения слайдов мышью?

Question

[tester]

Почему если поместить в слайдер iframe, то перестает работать перемещения слайдов мышью? На других страницах все норм(фото).
Вот ссылка на слайдер - https://tokmaganbet.github.io/sites/autolevin/revi...
Разметка :

<div class="slider-reviews owl-theme">
            <div class="item"><iframe height="220" src="https://www.youtube.com/embed/ctWheXPtkN8?autohide=1" frameborder="0" allowfullscreen></iframe></div>
            <div class="item"><iframe height="220" src="https://www.youtube.com/embed/ctWheXPtkN8?autohide=1" frameborder="0" allowfullscreen></iframe></div>
            <div class="item"><iframe height="220" src="https://www.youtube.com/embed/ctWheXPtkN8?autohide=1" frameborder="0" allowfullscreen></iframe></div>
            <div class="item"><iframe height="220" src="https://www.youtube.com/embed/ctWheXPtkN8?autohide=1" frameborder="0" allowfullscreen></iframe></div>
            <div class="item"><iframe height="220" src="https://www.youtube.com/embed/ctWheXPtkN8?autohide=1" frameborder="0" allowfullscreen></iframe></div>
            <div class="item"><iframe height="220" src="https://www.youtube.com/embed/ctWheXPtkN8?autohide=1" frameborder="0" allowfullscreen></iframe></div>
            <div class="item"><iframe height="220" src="https://www.youtube.com/embed/ctWheXPtkN8?autohide=1" frameborder="0" allowfullscreen></iframe></div>
        </div>

$(document).ready(function() {
$('.slider-reviews').owlCarousel({
        loop:true,
        margin:75,
        nav:true,
        dots: true,
        mouseDrag: true,
        touchDrag: true,
        autoWidth: true, 
        navText: ['<img src="./img/prev.png">', '<img src="./img/next.png">'],
        responsive:{
            0:{
                items:1,
                center:true
            },
            600:{
                items:2
            },
            1000:{
                items:3
            }
        }
    });
});

Answer 1

[tyzberd]

контент в iframe это отдельный документ, к тому же со сторонего ресурса. В нем не будут работать ваши события js

Comments

[tester]

Спасибо за ответ, но как тогда можно решить эту проблему? Просто с тегом video?

[tyzberd]

можете сделать так https://owlcarousel2.github.io/OwlCarousel2/demos/...

[tyzberd]

video тоже не вариант. Пользователю нужно управлять проигрывателем, перетаскивать перемотку и т.д

[Сергей delphinpro]

tyzberd, повехр фрейма положите прозрачный слой. но так что не перекрыть кнопки управления плеером.
Костыль, да. Но возможно будет работать как надо.

[tester]

Сергей, сделал такую разметку, не помогло:

<div class="slider-reviews owl-theme">
            <div class="item"><div class="video-s"><iframe height="220" src="https://www.youtube.com/embed/ctWheXPtkN8?autohide=1" frameborder="0" allowfullscreen></iframe></div></div>
            <div class="item"><div class="video-s"><iframe height="220" src="https://www.youtube.com/embed/ctWheXPtkN8?autohide=1" frameborder="0" allowfullscreen></iframe></div></div>
            <div class="item"><div class="video-s"><iframe height="220" src="https://www.youtube.com/embed/ctWheXPtkN8?autohide=1" frameborder="0" allowfullscreen></iframe></div></div>
            <div class="item"><div class="video-s"><iframe height="220" src="https://www.youtube.com/embed/ctWheXPtkN8?autohide=1" frameborder="0" allowfullscreen></iframe></div></div>
            <div class="item"><div class="video-s"><iframe height="220" src="https://www.youtube.com/embed/ctWheXPtkN8?autohide=1" frameborder="0" allowfullscreen></iframe></div></div>
            <div class="item"><div class="video-s"><iframe height="220" src="https://www.youtube.com/embed/ctWheXPtkN8?autohide=1" frameborder="0" allowfullscreen></iframe></div></div>
            <div class="item"><div class="video-s"><iframe height="220" src="https://www.youtube.com/embed/ctWheXPtkN8?autohide=1" frameborder="0" allowfullscreen></iframe></div></div>
        </div>

[Сергей delphinpro]

tokmaganbet,

<div class="item">
  <iframe height="220" src="https://www.youtube.com/embed/ctWheXPtkN8?autohide=1" frameborder="0" allowfullscreen></iframe>
  <div class="video-s"></div>
</div>

Слой .video-s расположить поверх фрейма, абсолютным позиционированием

[tester]

Сергей, Спасибо уже решил способом выше. Вот что получилось - https://tokmaganbet.github.io/sites/autolevin/revi...