HTML5 video background

[@kon_!]

Καλησπέρα,

 

θα ήθελα να ρωτήσω πως θα μπορούσα να βάλω ένα video background που να φαίνεται full-size σε ένα Bootstrap column. Το χρησιμοποιώ ως εξής:

<div class="row">
  <div class="col-sm-6"></div>
  <div class="col-sm-6">
    <video muted="muted" loop="loop" autoplay="autoplay" preload="auto" id="videobcg"><source type="video/mp4" data-src="test_video.mp4" src="test_video.mp4"></source>Sorry, your browser does not support HTML5 video.</video>
  </div>
</div>

Και στον κώδικα CSS για το #videobcg βάζω τα εξής:

#videobcg {
    height: auto;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: auto;
    z-index: 1;
}

Για κάποιο λόγο όμως το video δεν εμφανίζεται σε όλο το μέγεθος του column. Επισυνάπτω την εικόνα.

 

Υ.Γ. Η ανάλυση του video είναι 1280x720.

 

Ευχαριστώ εκ των προτέρων.

[vadou]

α) Από τη φωτογραφία δε μπορώ να καταλάβω κάτι.

 

β) Τι έχεις στο 1ο col-sm-6 στο site σου; Μήπως το πρόβλημα είναι ότι τα 2 columns δεν έχουν το ίδιο ύψος και γι'αυτό φαίνεται ότι το video δεν εμφανίζεται σε όλο το μέγεθος του column;

 

Αν δεν έχω καταλάβει κάτι, απλά αγνόησε το μήνυμα.

[exarhis]

Απότι έχω δει χωρίς να ξέρω HTML5 το video δε μπορεί να μπει background

δοκίμασε να του δώσεις ακριβείς διαστάσεις. Το 100% height & width είναι το 100% του div και όχι του explorer

[@kon_!]

@vadou το πρόβλημα είναι ότι δεν έχω ορίσει height στο div στο οποίο έχω βάλει το video.

@exarhis Background δεν εννοώ

background: url('test.mp4');

αλλά ότι θα φαίνεται σαν background.

 

 

Τελικά η λύση ήταν απλή. Χρησιμοποίησα την μεταβλητή object-fit από CSS3 και ορίζοντας το ύψος του column στο οποίο είχα βάλει το video έπαιξε σωστά.

 

Υ.Γ. FYI Πίνακας browser που υποστηρίζουν την object-fit

[igor1]

Φίλε μου δες στο λινκ που σου στέλνω...

Είναι ένα demo landing page που έχω φτιάξει.

Είναι ανοιχτός ο κώδικας(όχι minified).

http://www.tenandten.ae/

 

Το video για να μην το ψάχνεις είναι στο hover του email.