Карусель Слайдер с видео на YouTube

Ползунок вроде работает нормально. Просто измените код с тега видео на код для встраивания YouTube, и у вас будет карусель для плеера Youtube.

<div class = "video-slider">
<!-- SLIDE 1 -->
<div class = "slide">
    <div style = "position:relative;height:0;padding-bottom:56.28%"><iframe src = "https://www.youtube.com/embed/YE7VzlLtp-4?ecver=2" style = "position:absolute;width:100%;height:100%;left:0" width = "640" height = "360" frameborder = "0" allow = "autoplay; encrypted-media" allowfullscreen></iframe></div>
</div>
<!-- SLIDE 2 -->
<div class = "slide">
    <div style = "position:relative;height:0;padding-bottom:56.28%"><iframe src = "https://www.youtube.com/embed/EngW7tLk6R8?ecver=2" style = "position:absolute;width:100%;height:100%;left:0" width = "640" height = "360" frameborder = "0" allow = "autoplay; encrypted-media" allowfullscreen></iframe></div>
</div>
<!-- END OF SLIDES -->
<div class = "slide-arrow left"></div>
<div class = "slide-arrow right"></div>
</div>

Вы можете получить код для встраивания YouTube, щелкнув правой кнопкой мыши видео на youtube.com, выбрав «Копировать код для встраивания» и используя этот код в слайдере.

Надеюсь, поможет.

Сделал вилку авторской скрипки и внес изменения. JSFiddle

Вы можете добиться этого с помощью YouTube iFrame API:

https://developers.google.com/youtube/iframe_api_reference

Этот API становится доступным, когда вы добавляете enablejsapi=1 к URL-адресам встраиваемых видео YouTube.

Чтобы получить доступ к элементам управления для остановки видео, для каждого видео вам необходимо получить доступ к экземпляру YT.Player. Для каждого iFrame я создал экземпляр YT.Player и прикрепил его непосредственно к объекту slide в качестве параметра с именем video.

(Обратите внимание, что многие разработчики говорят, что вы не должны прикреплять данные напрямую к объектам DOM, но я сделал это здесь, потому что это позволило мне более точно соответствовать вашему исходному коду.)

Доступ к YT.Player можно получить через специальную функцию, которая должна называться onYouTubeIframeAPIReady, и я мог бы заставить ее работать, только если бы она была за пределами из $(document).ready.

Я не могу разместить свое решение на JSFiddle, потому что iFrames плохо работают, поэтому вот моя реализация на GitHub:

http://robertakarobin.github.io/jquery-video-sliderhttps://github.com/robertakarobin/jquery-video-slider

Вот соответствующие биты:

HTML:

<div class = "video-slider">
    <!-- SLIDE 1 -->
    <div class = "slide">
        <iframe class = "video" src = "https://www.youtube.com/embed/YE7VzlLtp-4?ecver=2&enablejsapi=1"></iframe>
    </div>
    <!-- SLIDE 2 -->
    <div class = "slide">
        <iframe class = "video" src = "https://www.youtube.com/embed/YE7VzlLtp-4?ecver=2&enablejsapi=1"></iframe>
    </div>
    <!-- END OF SLIDES -->
    <div class = "slide-arrow left"></div>
    <div class = "slide-arrow right"></div>
</div>

JavaScript:

$(document).ready(function () {
    var pos = 0,
        slides = $('.slide'),
        numOfSlides = slides.length;

    function nextSlide() {
        // `[]` returns a vanilla DOM object from a jQuery object/collection
        slides[pos].video.stopVideo()
        slides.eq(pos).animate({ left: '-100%' }, 500);
        pos = (pos >= numOfSlides - 1 ? 0 : ++pos);
        slides.eq(pos).css({ left: '100%' }).animate({ left: 0 }, 500);
    }

    function previousSlide() {
        slides[pos].video.stopVideo()
        slides.eq(pos).animate({ left: '100%' }, 500);
        pos = (pos == 0 ? numOfSlides - 1 : --pos);
        slides.eq(pos).css({ left: '-100%' }).animate({ left: 0 }, 500);
    }

    $('.left').click(previousSlide);
    $('.right').click(nextSlide);
})

function onYouTubeIframeAPIReady() {
    $('.slide').each(function (index, slide) {
        // Get the `.video` element inside each `.slide`
        var iframe = $(slide).find('.video')[0]
        // Create a new YT.Player from the iFrame, and store it on the `.slide` DOM object
        slide.video = new YT.Player(iframe)
    })
}