Προσθήκη βίντεο σε σελίδα και κεντράρισμα (Bootstrap - Owl Carousel )

[hariC11]

Καλησπέρα παιδιά, έχω το εξής πρόβλημα..

 

Είμαι καινούργιος και είναι το πρώτο μου project χρησιμοποιώντας το Bootstrap, αλλά παρά το διάβασμα δεν βρίσκω άκρη με το κεντράρισμα...

 

Έχω ενσωματώσει 4 βίντεο από το YouTube και τα παρουσιάζω με το Owl Carousel! Όλα καλά ως εδώ! 

-Τα προβλήματα είναι τα εξής, 

1) Όταν κάνω resize το παράθυρο του browser (δλδ αλλαγή ανάλυσης), το βίντεο "χάνει" το κεντράρισμα !! Να σημειώσω ότι αυτό γίνεται μόνο στις μεγάλες οθόνες! Στις μικρές το div είναι responsive! 

 

2) Τα βίντεο από την άλλη, σε Tablet και Mobile, δεν γίνονται responsive! Αυτό να πω την αλήθεια, δεν το έχω ψάξει πολύ ακόμα, θα υπάρχει και αυτό το πρόβλημα!!

Εκτός τα παραπάνω, όταν πατάω κάποιο βίντεο, να παίζει αμέσως ο player, όχι να περιμένει να κάνει load!

Κώδικας

 

HTML

<section id="photos" class="protfolio_section padding">
    <div class="container-fluid">
        <div class="text-center mb-40">
            <h2>Portfolio</h2>
            <p>Our services will provide marketing expertise to your business.</p>
        </div><!-- section-heading -->
    
    <div class="col-md-6 col-md-offset-3">
        <div id="video_carousel" class="owl-carousel owl-theme fs_dots">
             <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=cUxSu0xwY3M"></a></div>
             <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=8jvB3MbGa0I"></a></div>
             <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=SnV287SJ3Ms"></a></div>
             <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=NuzHN07Z7F4"></a></div>
            </div>
   </div><!-- portfolio 1 -->


    </div>
</section><!-- /.protfolio_section -->

        

JQuery

 

    $('#video_carousel').owlCarousel({
       items:1,
       loop:false,
       margin:25,
       video:true,
       dots:true,
        videoHeight: 400, 
   videoWidth: 800,
     touchDrag:true,
   mouseDrag:true,
   mergeFit:true,
       center:true
    })

[Ruhl]

Responsive video

 

.klasi{

position: relative;

  padding-bottom: 56.25%;

  padding-top: 30px;

  height: 0;

  overflow: hidden;

  margin-bottom: 50px;

}

 

.klasi iframe{

position: absolute;

  top: 0; left: 0;

  width: 100%;

  height: 100%;

}
 

Κατι τετοιο θελει το ειχα αποθηκευμενο στα αρχεια μου, το κεντραρισμα που λες οταν μικρενεις την οθονη στο pc ξαναπατας refresh?ολη την σελιδα.Δεν θυμαμε αν το κανει στα βιντεο, παντος πχ στον χαρτη αν τραβηξεις την οθονη σε ποιο μικρη το κεντραρισμα του marker φευγει αλλα παει παλι μονο του στην μεση αν κανεις refresh την σελιδα.(οποτε δεν εχει θεμα)

 

 

1) Όταν κάνω resize το παράθυρο του browser (δλδ αλλαγή ανάλυσης), το βίντεο "χάνει" το κεντράρισμα !! Να σημειώσω ότι αυτό γίνεται μόνο στις μεγάλες οθόνες! Στις μικρές το div είναι responsive! 

οπως το περιγραφεις μου φενεται θελει max-width:  στο css

[hariC11]

 

Responsive video

 

.klasi{

position: relative;

  padding-bottom: 56.25%;

  padding-top: 30px;

  height: 0;

  overflow: hidden;

  margin-bottom: 50px;

}

 

.klasi iframe{

position: absolute;

  top: 0; left: 0;

  width: 100%;

  height: 100%;

}

 

Κατι τετοιο θελει το ειχα αποθηκευμενο στα αρχεια μου, το κεντραρισμα που λες οταν μικρενεις την οθονη στο pc ξαναπατας refresh?ολη την σελιδα.Δεν θυμαμε αν το κανει στα βιντεο, παντος πχ στον χαρτη αν τραβηξεις την οθονη σε ποιο μικρη το κεντραρισμα του marker φευγει αλλα παει παλι μονο του στην μεση αν κανεις refresh την σελιδα.(οποτε δεν εχει θεμα)

οπως το περιγραφεις μου φενεται θελει max-width:  στο css

 

 

Αυτο ήταν, σε ευχαριστώ πολύ!!