mensimulasikan ukuran latar belakang: sampul pada <video> atau <img>

Bagaimana saya bisa mensimulasikan fungsi background-size:coverpada elemen html seperti <video>atau <img>?

Saya ingin itu bekerja

background-size: cover;
background-position: center center;

Ini adalah sesuatu yang saya tarik keluar untuk sementara waktu, tetapi saya menemukan solusi hebat yang tidak menggunakan skrip apa pun, dan dapat mencapai simulasi sampul yang sempurna pada video dengan 5 baris CSS (9 jika Anda menghitung pemilih dan kurung ). Ini memiliki 0 tepi-kasus di mana itu tidak berfungsi dengan baik, kekurangan kompatibilitas CSS3 .

Anda dapat melihat contohnya di sini

Masalah dengan solusi Timotius , adalah bahwa itu tidak menangani penskalaan dengan benar. Jika elemen di sekitarnya lebih kecil dari file video, itu tidak diperkecil. Bahkan jika Anda memberi tag video ukuran awal yang sangat kecil, seperti 16px oleh 9px, autoakhirnya memaksanya untuk ukuran minimum file aslinya. Dengan solusi terpilih saat ini di halaman ini, tidak mungkin bagi saya untuk menurunkan skala file video yang menghasilkan efek zoom yang drastis.

Namun, jika rasio aspek video Anda diketahui, seperti 16: 9, Anda dapat melakukan hal berikut:

.parent-element-to-video {
    overflow: hidden;
}
video {
    height: 100%;
    width: 177.77777778vh; /* 100 * 16 / 9 */
    min-width: 100%;
    min-height: 56.25vw; /* 100 * 9 / 16 */
}

Jika elemen induk video diatur untuk menutupi seluruh halaman (seperti position: fixed; width: 100%; height: 100vh;), maka video juga akan.

Jika Anda ingin video terpusat juga, Anda dapat menggunakan pendekatan pemusatan pasti:

/* merge with above css */
.parent-element-to-video {
    position: relative; /* or absolute or fixed */
}
video {
    position: absolute;
    left: 50%; /* % of surrounding element */
    top: 50%;
    transform: translate(-50%, -50%); /* % of current element */
}

Tentu saja, vw, vh, dan transformyang CSS3, jadi jika Anda perlu kompatibilitas dengan browser yang jauh lebih tua , Anda harus menggunakan skrip.

jsFiddle

Menggunakan penutup latar belakang baik untuk gambar, dan lebar 100%. Ini tidak optimal untuk <video>, dan jawaban ini terlalu rumit. Anda tidak perlu jQuery atau JavaScript untuk menyelesaikan latar belakang video lebar penuh.

Perlu diingat bahwa kode saya tidak akan mencakup latar belakang sepenuhnya dengan video seperti sampul akan, tetapi justru akan membuat video sebesar yang diperlukan untuk mempertahankan rasio aspek dan masih menutupi seluruh latar belakang. Setiap kelebihan video akan berdarah tepi halaman, sisi mana yang bergantung pada tempat Anda meletakkan video.

Jawabannya cukup sederhana.

Cukup gunakan kode video HTML5 ini, atau sesuatu seperti ini: (tes dalam Halaman Penuh)

html, body {
  width: 100%; 
  height:100%; 
  overflow:hidden;
}

#vid{
  position: absolute;
  top: 50%; 
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  z-index: -1000; 
  overflow: hidden;
}

<video id="vid" video autobuffer autoplay>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

Tinggi min dan lebar minimum akan memungkinkan video mempertahankan rasio aspek video, yang biasanya merupakan rasio aspek dari browser normal pada resolusi normal. Setiap kelebihan video berdarah di sisi halaman.

Untuk beberapa browser, Anda dapat menggunakan

object-fit: cover;

http://caniuse.com/object-fit

Begini cara saya melakukan ini. Contoh kerja ada di jsFiddle ini .

var min_w = 300; // minimum video width allowed
var vid_w_orig;  // original video dimensions
var vid_h_orig;

jQuery(function() { // runs after DOM has loaded

  vid_w_orig = parseInt(jQuery('video').attr('width'));
  vid_h_orig = parseInt(jQuery('video').attr('height'));
  $('#debug').append("<p>DOM loaded</p>");

  jQuery(window).resize(function () { resizeToCover(); });
  jQuery(window).trigger('resize');
});

function resizeToCover() {
  // set the video viewport to the window size
  jQuery('#video-viewport').width(jQuery(window).width());
  jQuery('#video-viewport').height(jQuery(window).height());

  // use largest scale factor of horizontal/vertical
  var scale_h = jQuery(window).width() / vid_w_orig;
  var scale_v = jQuery(window).height() / vid_h_orig;
  var scale = scale_h > scale_v ? scale_h : scale_v;

  // don't allow scaled width < minimum video width
  if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;};

  // now scale the video
  jQuery('video').width(scale * vid_w_orig);
  jQuery('video').height(scale * vid_h_orig);
  // and center it by scrolling the video viewport
  jQuery('#video-viewport').scrollLeft((jQuery('video').width() - jQuery(window).width()) / 2);
  jQuery('#video-viewport').scrollTop((jQuery('video').height() - jQuery(window).height()) / 2);

  // debug output
  jQuery('#debug').html("<p>win_w: " + jQuery(window).width() + "</p>");
  jQuery('#debug').append("<p>win_h: " + jQuery(window).height() + "</p>");
  jQuery('#debug').append("<p>viewport_w: " + jQuery('#video-viewport').width() + "</p>");
  jQuery('#debug').append("<p>viewport_h: " + jQuery('#video-viewport').height() + "</p>");
  jQuery('#debug').append("<p>video_w: " + jQuery('video').width() + "</p>");
  jQuery('#debug').append("<p>video_h: " + jQuery('video').height() + "</p>");
  jQuery('#debug').append("<p>vid_w_orig: " + vid_w_orig + "</p>");
  jQuery('#debug').append("<p>vid_h_orig: " + vid_h_orig + "</p>");
  jQuery('#debug').append("<p>scale: " + scale + "</p>");
};

#video-viewport {
  position: absolute;
  top: 0;
  overflow: hidden;
  z-index: -1; /* for accessing the video by click */
}

#debug {
  position: absolute;
  top: 0;
  z-index: 100;
  color: #fff;
  font-size: 12pt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video-viewport">
  <video autoplay controls preload width="640" height="360">
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"type="video/mp4" />
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm"type="video/webm" />
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv"type="video/webm" />
  </video>
</div>

<div id="debug"></div>

Jawaban lainnya baik tetapi melibatkan javascript atau tidak memusatkan video secara horizontal DAN vertikal.

Anda dapat menggunakan solusi CSS lengkap ini untuk memiliki video yang mensimulasikan ukuran latar belakang: properti sampul:

  video {
    position: fixed;           // Make it full screen (fixed)
    right: 0;
    bottom: 0;
    z-index: -1;               // Put on background

    min-width: 100%;           // Expand video
    min-height: 100%;
    width: auto;               // Keep aspect ratio
    height: auto;

    top: 50%;                  // Vertical center offset
    left: 50%;                 // Horizontal center offset

    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);         // Cover effect: compensate the offset

    background: url(bkg.jpg) no-repeat;      // Background placeholder, not always needed
    background-size: cover;
  }

Berdasarkan jawaban dan komentar Daniel de Wit , saya mencari sedikit lebih banyak. Terima kasih padanya untuk solusinya.

Solusinya adalah menggunakan object-fit: cover;yang memiliki dukungan hebat (setiap browser modern mendukungnya). Jika Anda benar-benar ingin mendukung IE, Anda dapat menggunakan polyfill seperti objek-fit-gambar atau objek-fit .

Demo:

img {
  float: left;
  width: 100px;
  height: 80px;
  border: 1px solid black;
  margin-right: 1em;
}
.fill {
  object-fit: fill;
}
.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scale-down {
  object-fit: scale-down;
}

<img class="fill" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="contain" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="cover" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="none" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="scale-down" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>

dan dengan orang tua:

div {
  float: left;
  width: 100px;
  height: 80px;
  border: 1px solid black;
  margin-right: 1em;
}
img {
  width: 100%;
  height: 100%;
}
.fill {
  object-fit: fill;
}
.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scale-down {
  object-fit: scale-down;
}

<div>
<img class="fill" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="contain" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="cover" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="none" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="scale-down" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div>

Solusi M-Pixel sangat bagus karena memecahkan masalah penskalaan jawaban Timotius (video akan naik skala tetapi tidak turun, jadi jika video Anda benar-benar besar, ada peluang bagus Anda hanya akan melihat sedikit diperbesar di bagiannya). Namun, solusi tersebut didasarkan pada asumsi yang salah terkait dengan ukuran wadah video, yaitu harus 100% dari lebar dan tinggi viewport. Saya telah menemukan beberapa kasus di mana itu tidak berhasil untuk saya, jadi saya memutuskan untuk mengatasi masalah sendiri, dan saya percaya saya datang dengan solusi terbaik .

HTML

<div class="parent-container">
    <div class="video-container">
        <video width="1920" height="1080" preload="auto" autoplay loop>
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
</div>

CSS

.parent-container {
  /* any width or height */
  position: relative;
  overflow: hidden;
}
.video-container {
  width: 100%;
  min-height: 100%;
  position: absolute;
  left: 0px;
  /* center vertically */
  top: 50%;
  -moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
.video-container::before {
  content: "";
  display: block;
  height: 0px;
  padding-bottom: 56.25%; /* 100% * 9 / 16 */
}
.video-container video {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0px;
  /* center horizontally */
  left: 50%;
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

Ini juga didasarkan pada rasio video, jadi jika video Anda memiliki rasio selain 16/9 Anda akan ingin mengubah% padding-bottom. Selain itu, ia bekerja di luar kotak. Diuji dalam IE9 +, Safari 9.0.1, Chrome 46, dan Firefox 41.

EDIT (17 Maret 2016)

Karena saya diposting jawaban ini saya sudah menulis modul CSS kecil untuk mensimulasikan baik background-size: coverdan background-size: containpada <video>elemen: http://codepen.io/benface/pen/NNdBMj

Ini mendukung keberpihakan yang berbeda untuk video (mirip dengan background-position). Perhatikan juga bahwa containimplementasinya tidak sempurna. Tidak seperti background-size: containitu, ini tidak akan menskala video melewati ukuran sebenarnya jika lebar dan tinggi wadah lebih besar, tapi saya pikir itu masih bisa berguna dalam beberapa kasus. Saya juga menambahkan kelas khusus fill-widthdan fill-heightyang dapat Anda gunakan bersama containuntuk mendapatkan campuran khusus containdan cover... mencobanya, dan merasa bebas untuk memperbaikinya!

object-fit: cover adalah jawaban terbaik dengan IE ini, Safari polyfill.

https://github.com/constancecchen/object-fit-polyfill

Ini mendukung img, videodan pictureelemen.

CSS dan js kecil dapat membuat video menutupi latar belakang dan terpusat secara horizontal.

CSS:

video#bgvid {
    position: absolute;
    bottom: 0px; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1; 
    overflow: hidden;
}

JS: (ikat ini dengan ukuran jendela dan panggil sekali secara terpisah)

$('#bgvid').css({
    marginLeft : '-' + ($('#bgvid').width()/2) + 'px'
})

Tepat setelah bagian komentar panjang kami, saya pikir ini yang Anda cari, berdasarkan jQuery:

HTML:

<img width="100%" id="img" src="http://uploads8.wikipaintings.org/images/william-adolphe-bouguereau/self-portrait-presented-to-m-sage-1886.jpg">

JS:

<script type="text/javascript">
window.onload = function(){
       var img = document.getElementById('img')
       if(img.clientHeight<$(window).height()){
            img.style.height=$(window).height()+"px";
       }
       if(img.clientWidth<$(window).width()){
            img.style.width=$(window).width()+"px";
       } 
}
​</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

body{
    overflow: hidden;
}

Kode di atas menggunakan lebar dan tinggi browser jika Anda melakukan ini dalam div, Anda harus mengubahnya menjadi seperti ini:

Untuk Div:

HTML:

<div style="width:100px; max-height: 100px;" id="div">
     <img width="100%" id="img" src="http://uploads8.wikipaintings.org/images/william-adolphe-bouguereau/self-portrait-presented-to-m-sage-1886.jpg">
</div>

JS:

<script type="text/javascript">
window.onload = function(){
       var img = document.getElementById('img')
       if(img.clientHeight<$('#div').height()){
            img.style.height=$('#div').height()+"px";
       }
       if(img.clientWidth<$('#div').width()){
            img.style.width=$('#div').width()+"px";
       } 
}
​</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

div{
   overflow: hidden;
}

Saya juga harus menyatakan bahwa saya hanya menguji ini Google Chrome ... di sini adalah jsfiddle: http://jsfiddle.net/ADCKk/

Jawaban teratas tidak mengurangi video saat Anda memiliki lebar browser kurang dari lebar video Anda. Coba gunakan CSS ini (dengan #bgvid menjadi id video Anda):

#bgvid {
     position: fixed;
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     transform: translateX(-50%) translateY(-50%);
     -webkit-transform: translateX(-50%) translateY(-50%);
}

Saya gunna memposting solusi ini juga, karena saya punya masalah ini tetapi solusi lain tidak bekerja untuk situasi saya ...

saya pikir untuk mensimulasikan background-size:cover;properti css dengan benar pada elemen alih-alih properti background-image elemen, Anda harus membandingkan rasio aspek gambar dengan rasio aspek windows saat ini, jadi apa pun ukurannya (dan juga dalam hal gambar tersebut adalah lebih tinggi daripada lebih luas) jendela adalah elemen yang mengisi jendela (dan juga memusatkannya, meskipun saya tidak tahu apakah itu persyaratan) ....

menggunakan gambar, hanya demi kesederhanaan, saya yakin elemen video akan berfungsi dengan baik juga.

pertama-tama dapatkan rasio aspek elemen (setelah dimuat), lalu pasang handler ukuran jendela, picu sekali untuk ukuran awal:

var img = document.getElementById( "background-picture" ),
    imgAspectRatio;

img.onload = function() {
    // get images aspect ratio
    imgAspectRatio = this.height / this.width;
    // attach resize event and fire it once
    window.onresize = resizeBackground;
    window.onresize();
}

kemudian pada handler ukuran Anda, Anda harus terlebih dahulu menentukan apakah akan mengisi lebar atau mengisi ketinggian dengan membandingkan rasio aspek jendela saat ini dengan rasio aspek asli gambar.

function resizeBackground( evt ) {

// get window size and aspect ratio
var windowWidth = window.innerWidth,
    windowHeight = window.innerHeight;
    windowAspectRatio = windowHeight / windowWidth;

//compare window ratio to image ratio so you know which way the image should fill
if ( windowAspectRatio < imgAspectRatio ) {
    // we are fill width
    img.style.width = windowWidth + "px";
    // and applying the correct aspect to the height now
    img.style.height = (windowWidth * imgAspectRatio) + "px";
    // this can be margin if your element is not positioned relatively, absolutely or fixed
    // make sure image is always centered
    img.style.left = "0px";
    img.style.top = (windowHeight - (windowWidth * imgAspectRatio)) / 2 + "px";
} else { // same thing as above but filling height instead
    img.style.height = windowHeight + "px";
    img.style.width = (windowHeight / imgAspectRatio) + "px";
    img.style.left = (windowWidth - (windowHeight / imgAspectRatio)) / 2 + "px";
    img.style.top = "0px";
}

}

Pendekatan ini hanya menggunakan css dan html. Anda sebenarnya dapat menumpuk div di bawah video dengan mudah. Itu menutupi tetapi tidak di tengah saat Anda mengubah ukuran.

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> 
</script>
</head>
<body>
<div id = "contain">
<div id="vid">
    <video autoplay>
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
    </video>
</div>
</div>
</body>
</html>

CCS:

/*
filename:style.css
*/
body {
    margin:0;
}

#vid video{
position: absolute; 
right: 0; 
top: 0;
min-width: 100%; 
min-height: 100%;
width: auto; 
height: auto; 
}

#contain {
width:100%;
height:100%;
zoom:1%;/*Without this the video will be stretched and skewed*/ 
}

@ Hobbes Tersembunyi

Pertanyaan ini memiliki reputasi karunia +100 terbuka dari Hidden Hobbes yang berakhir dalam 6 hari. Inventif menggunakan unit viewport untuk mendapatkan solusi hanya CSS yang fleksibel.

Anda membuka hadiah untuk pertanyaan ini hanya untuk solusi CSS, jadi saya akan mencobanya. Solusi saya untuk masalah seperti ini adalah menggunakan rasio tetap untuk menentukan tinggi dan lebar video. Saya biasanya menggunakan Bootstrap, tetapi saya mengekstrak CSS yang diperlukan dari sana untuk membuatnya bekerja tanpa. Ini adalah kode yang saya gunakan sebelumnya untuk antara lain memusatkan video yang disematkan dengan rasio yang benar. Itu harus bekerja untuk <video>dan <img>elemen juga. Itu adalah yang teratas yang relevan di sini, tetapi saya memberi Anda dua lainnya juga karena saya sudah memiliki mereka meletakkan di sekitar. Semoga berhasil! :)

contoh jsfiddle layar penuh

.embeddedContent.centeredContent {
    margin: 0px auto;
}
.embeddedContent.rightAlignedContent {
    margin: auto 0px auto auto;
}
.embeddedContent > .embeddedInnerWrapper {
    position:relative;
    display: block;
    padding: 0;
    padding-top: 42.8571%; /* 21:9 ratio */
}
.embeddedContent > .embeddedInnerWrapper > iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}
.embeddedContent {
    max-width: 300px;
}
.box1text {
    background-color: red;
}
/* snippet from Bootstrap */
.container {
    margin-right: auto;
    margin-left: auto;
}
.col-md-12 {
    width: 100%;
}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            Testing ratio AND left/right/center align:<br />
            <div class="box1text">
                <div class="embeddedContent centeredContent">
                    <div class="embeddedInnerWrapper">
                        <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&amp;jqoemcache=eE9xf" width="425"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            Testing ratio AND left/right/center align:<br />
            <div class="box1text">
                <div class="embeddedContent rightAlignedContent">
                    <div class="embeddedInnerWrapper">
                        <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&amp;jqoemcache=eE9xf" width="425"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            Testing ratio AND left/right/center align:<br />
            <div class="box1text">
                <div class="embeddedContent">
                    <div class="embeddedInnerWrapper">
                        <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&amp;jqoemcache=eE9xf" width="425"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Untuk menjawab komentar dari Weotch bahwa jawaban Timothy Ryan Carpenter tidak memperhitungkan coverpemusatan latar belakang, saya menawarkan perbaikan cepat CSS ini:

CSS:

margin-left: 50%;
transform: translateX(-50%);

Menambahkan dua baris ini akan memusatkan elemen apa pun. Bahkan lebih baik, semua browser yang dapat menangani video HTML5 juga mendukung transformasi CSS3, jadi ini akan selalu berhasil.

CSS yang lengkap terlihat seperti ini.

#video-background { 
    position: absolute;
    bottom: 0px; 
    right: 0px; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1000; 
    overflow: hidden;
    margin-left: 50%;
    transform: translateX(-50%);
}

Saya telah mengomentari langsung jawaban Timotius, tetapi saya tidak memiliki reputasi yang cukup untuk melakukannya.

Kawan, saya punya solusi yang lebih baik, pendek dan berfungsi sempurna untuk saya. Saya menggunakannya untuk video. Dan itu sempurna meniru opsi sampul dalam css.

Javascript

    $(window).resize(function(){
            //use the aspect ration of your video or image instead 16/9
            if($(window).width()/$(window).height()>16/9){
                $("video").css("width","100%");
                $("video").css("height","auto");
            }
            else{
                $("video").css("width","auto");
                $("video").css("height","100%");
            }
    });

Jika Anda membalik if, kalau tidak Anda akan mendapatkan konten.

Dan ini css. (Anda tidak perlu menggunakannya jika Anda tidak ingin pemosisian tengah, div induk harus " posisi: relatif ")

CSS

video {
position: absolute;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;}

Saya baru saja menyelesaikan ini dan ingin berbagi. Ini berfungsi dengan Bootstrap 4. Berhasil dengan imgtetapi saya tidak mengujinya video. Inilah HAML dan SCSS

.container
  .detail-img.d-flex.align-items-center
    %img{src: 'http://placehold.it/1000x700'}

.detail-img { // simulate background: center/cover
  max-height: 400px;
  overflow: hidden;

  img {
    width: 100%;
  }
}

/* simulate background: center/cover */
.center-cover { 
  max-height: 400px;
  overflow: hidden;
  
}

.center-cover img {
    width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="center-cover d-flex align-items-center">
    <img src="http://placehold.it/1000x700">
  </div>
</div>

Pertanyaan lama, tetapi jika ada yang melihat ini, jawaban terbaik menurut saya adalah mengubah video menjadi GIF animasi. Ini memberi Anda lebih banyak kontrol dan Anda bisa memperlakukannya seperti gambar. Ini juga satu-satunya cara agar bisa berfungsi di ponsel, karena Anda tidak bisa memutar video secara otomatis. Saya tahu pertanyaannya adalah meminta untuk melakukannya dalam <img>tag, tapi saya tidak benar-benar melihat sisi buruk dari penggunaan <div>dan pelaksanaanbackground-size: cover