CODEWITHSUNDEEP
videoyoutubevimeoautoplayowl-carousel
Staffan Estberg
Staffan Estberg

Reputation: 7035

Full browser width video autoplay with Owl Carousel 2

I'm trying to create a full browser width slider using Owl Carousel 2, following this example http://www.owlcarousel.owlgraphic.com/demos/video.html

In the demo however it only shows how to embed videos - in addition to that I want to be able to display them at a full browser's width (and height), and have them autoplay as the user reaches that particular slide. I'm guessing this would involve using Vimeo's and YouTube's APIs as the carousel is a bit limited but not sure where to start. Ideas?

Upvotes: 1

Views: 10789

Answers (3)

V. Kovalev
V. Kovalev

Reputation: 9

(function($) {
    $(document).ready(function() {
        setTimeout(
            function() {
                $(".active .owl-video-play-icon").trigger("click");
            }, 1000);
    });
    $(document).on('click', '.owl-dot', function() {
        if ($('.owl-item.active').hasClass('owl-video-playing')) {} else {
            setTimeout(
                function() {
                    $(".active .owl-video-play-icon").trigger("click");
                }, 1000);
        }
    });
})(jQuery);

Upvotes: 0

Dvilla
Dvilla

Reputation: 21

I'm doing a similar thing with OwlCarousel 2 and this was my fix for it. 

$('.owl-carousel').owlCarousel({       
   onInitialized:theThing,       
  });
function theThing(event){
  alert("")
  $(".active .owl-video-play-icon").trigger("click")
};

I'm triggering the click function on a callback once Owl initializes, so that the video will appear and begin to play on start.

Upvotes: 2

Gerwin
Gerwin

Reputation: 1612

To set a video to the browser's full width and height you could add this to your css and give the video the id 'videoID':

#videoID{
min-width: 100%;
min-height: 100%;
position: absolute;
}

this will make any video on your page have a minimum width and height of 100% of your video, and make it stay where it is.

edit: to have a video autoplay when you reach the slide, you could always make a variabel using jquery or javascript, whenever the slide to the right is pressed you could make the variable one higher for examle:

var counter = 0;

$(#slider).on('click', function(){
counter++;
});

you are now able to check the counter as follows:

if (counter == 1){
    $('sliderright').on('click', function(){
        $document.getElementById('video').play();
    });
};

it may not be the best way, but I believe it could work.

Upvotes: 0

Related Questions