імітувати розмір фону: обкладинка на <відео> або <імг>

Як можна імітувати функціональність background-size:coverелемента html на зразок <video>або <img>?

Мені б хотілося, щоб так працювало

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

Це те, на що я витягнув волосся на деякий час, але я натрапив на чудове рішення, яке не використовує жодного сценарію, і може досягти ідеального моделювання обкладинки на відео з 5 рядками CSS (9, якщо рахувати селектори та дужки ). У цьому випадку є 0 кращих випадків, коли він працює не ідеально, окрім CSS3-сумісності .

Приклад ви можете побачити тут

Проблема з рішенням Тимофія полягає в тому, що він не справляється з масштабуванням правильно. Якщо навколишній елемент менше, ніж відеофайл, він не зменшується. Навіть якщо надати відеотеги невеликий початковий розмір, наприклад, 16 пікселів на 9 пікселів, в autoкінцевому підсумку примушує його до мінімального розміру нативного файлу. З поточним голосовим рішенням на цій сторінці мені неможливо було зменшити масштаб відеофайлів, що призвело до різкого ефекту збільшення.

Якщо співвідношення сторін вашого відео відомо, однак, наприклад, 16: 9, ви можете зробити наступне:

.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 */
}

Якщо батьківський елемент відеоролика встановлений для покриття всієї сторінки (наприклад, position: fixed; width: 100%; height: 100vh;), то й відео також буде.

Якщо ви хочете, щоб відео також було зосереджене, ви можете скористатися підходом до центру центру:

/* 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 */
}

Звичайно, vw, vhі transformє CSS3, тому якщо вам потрібна сумісність з більш старими браузерами , вам потрібно використовувати сценарій.

jsFiddle

Використання фонового покриття добре для зображень, і так само ширина 100%. Вони не є оптимальними <video>, і ці відповіді надмірно складні. Вам не потрібен jQuery або JavaScript для створення повної ширини відеозапису.

Майте на увазі, що мій код не буде повністю покривати фон таким чином, як відео, як на обкладинці, але натомість зробить це відео таким же великим, як потрібно, щоб підтримувати співвідношення сторін і все одно охоплювати весь фон. Будь-яке надлишкове відео зніме з краю сторінки, залежно від того, де ви прив’язуєте відео.

Відповідь досить проста.

Просто використовуйте цей відео-код HTML5 або щось подібне: (тест на повній сторінці)

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>

Мінімальна висота та мінімальна ширина дозволять відео підтримувати співвідношення сторін відео, яке зазвичай є співвідношенням сторін будь-якого звичайного браузера при нормальній роздільній здатності. Будь-яке зайве відео кровоточить збоку сторінки.

Для деяких браузерів ви можете використовувати

object-fit: cover;

http://caniuse.com/object-fit

Ось як я це зробив. Робочий приклад - у цьому jsFiddle .

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>

Інші відповіді були хорошими, але вони включають JavaScript, або вони не центрують відео по горизонталі та вертикалі.

Ви можете використовувати це повне рішення CSS, щоб мати відео, яке імітує розмір фону: cover властивість:

  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;
  }

На основі відповіді та коментарів Даніеля де Віта я трохи більше шукав. Завдяки йому за рішення.

Рішення полягає у використанні, object-fit: cover;яка має чудову підтримку (підтримує її кожен сучасний браузер). Якщо ви дійсно хочете підтримувати IE, ви можете використовувати поліфункцію на зразок object-fit-images або object-fit .

Демо:

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"/>

і з батьком:

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>

Рішення M-Pixel чудово тим, що воно вирішує проблему масштабування відповіді Тимофія (відео збільшиться вгору, але не зменшиться, тому, якщо ваше відео дійсно велике, є хороші шанси, що ви побачите лише невеликий масштаб в його частині). Однак це рішення базується на помилкових припущеннях, пов’язаних із розміром відеоконтейнера, а саме, що це обов'язково 100% ширини та висоти вікна перегляду. Я знайшов декілька випадків, коли це не спрацювало для мене, тому я вирішив вирішити проблему сам, і я вважаю, що придумав остаточне рішення .

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%);
}

Він також ґрунтується на співвідношенні відео, тому якщо ваше відео має співвідношення, відмінне від 16/9, ви хочете змінити нижню частину нижньої частини. Крім цього, він працює поза коробкою. Тестовано в IE9 +, Safari 9.0.1, Chrome 46 та Firefox 41.

EDIT (17 березня 2016 р.)

Так як я опублікував цю відповідь я написав невеличкий модуль CSS для імітації як background-size: coverі background-size: containна <video>елементах: http://codepen.io/benface/pen/NNdBMj

Він підтримує різні вирівнювання для відео (подібні до background-position). Також зауважте, що containреалізація не є ідеальною. На відміну від background-size: containцього, відео не буде масштабувати його фактичний розмір, якщо ширина та висота контейнера будуть більшими, але я думаю, що він може бути корисним у деяких випадках. Я також додав спеціальні fill-widthта fill-heightкласи, які ви можете використовувати разом, containщоб отримати спеціальну суміш containі cover... спробуйте, і сміливо вдосконалюйте її!

object-fit: cover є найкращою відповіддю на цей IE, поліфаза Safari.

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

Це і опори img, videoі pictureелементи.

CSS та маленькі js можуть зробити відео покриттям фону та горизонтально по центру.

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: (зв’яжіть це за допомогою розміру вікна та зателефонуйте один раз окремо)

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

Одразу після нашого довгого розділу коментарів, я думаю, що це те, що ви шукаєте, це 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;
}

У наведеному вище коді використовується ширина та висота веб-переглядачів, якщо ви, де робите це в розділі, вам доведеться змінити його на щось подібне:

Для 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;
}

Я також повинен зазначити, що я протестував лише це Google Chrome ... ось jsfiddle: http://jsfiddle.net/ADCKk/

Верхня відповідь не зменшує масштаб відео, якщо ви перебуваєте в ширині веб-переглядача, меншої за ширину вашого відео. Спробуйте скористатися цим CSS (при цьому #bgvid є ідентифікатором вашого відео):

#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%);
}

Я також розміщую це рішення, оскільки у мене була ця проблема, але інші рішення не працювали для моєї ситуації ...

Я думаю, щоб правильно імітувати background-size:cover;властивість css на елементі замість елементів властивості background-image, вам доведеться порівняти співвідношення сторін зображення з поточним співвідношенням сторін Windows, так що незалежно від розміру (а також у випадку, якщо зображення вище, ніж ширше) вікно - це елемент, який заповнює вікно (а також центрує його, хоча я не знаю, чи це було вимогою) ....

використовуючи зображення, просто для простоти, я впевнений, що відео елемент також справно працює.

спочатку отримайте співвідношення сторін елементів (як тільки він завантажується), потім приєднайте обробник розміру вікна, запустіть його один раз для початкового розміру:

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();
}

то у вашому оброблювачі розміру слід спочатку визначити, чи слід заповнювати ширину чи висоту заповнення, порівнюючи поточне співвідношення сторін вікна з початковим співвідношенням зображення.

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";
}

}

Цей підхід просто використовує css та html. Насправді ви можете легко скласти фрагменти під відео. Це покриття, але не в центрі, коли ви змінюєте розмір.

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*/ 
}

@Hidden Hobbes

Це питання має відкриту нагороду, вартістю +100 репутації від Прихованого Гоббса, що закінчується через 6 днів. Винахідливе використання одиниць вікна перегляду для отримання гнучкого рішення лише для CSS.

Ви відкрили щедро за це питання для вирішення лише CSS, тому я спробую. Моє рішення такої проблеми полягає у використанні фіксованого співвідношення для визначення висоти та ширини відео. Зазвичай я використовую Bootstrap, але я витяг звідти необхідний CSS, щоб він без роботи працював. Це код, який я використовував раніше, серед іншого, щоб зосереджувати вбудоване відео з правильним співвідношенням. Це повинно працювати <video>і для <img>елементів. Це головне, що тут актуально, але я дав вам і два інших, оскільки я вже мав їх прокладати. Удачі! :)

приклад на повноекранному екрані jsfiddle

.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>

Щоб відповісти на коментар від weotch , що Тімоті Райан Carpenter «відповідь s не враховує cover» s центрування фону, я пропоную це швидко виправити CSS:

CSS:

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

Додавання цих двох рядків зосереджує будь-який елемент. Ще краще, що всі браузери, які можуть обробляти HTML5 відео, також підтримують перетворення CSS3, тому це завжди буде працювати.

Повний CSS виглядає приблизно так.

#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%);
}

Я б прямо прокоментував відповідь Тимофія, але мені не вистачає репутації для цього.

Хлопці, я маю краще рішення його коротке і мені прекрасно працює. Я використовував це для відео. І його ідеально імітує варіант обкладинки в 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%");
            }
    });

Якщо ви перегорнете if, інакше ви отримаєте містити.

І ось css. (Вам не потрібно використовувати його, якщо ви не хочете розташувати по центру, батьківський діл повинен бути " позиція: відносна ")

CSS

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

Я просто вирішив це і хотів поділитися. Це працює з Bootstrap 4. Це працює з, imgале я не тестував його video. Ось HAML та 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>

Старе запитання, але якщо хтось це бачить, найкраща відповідь, на мою думку, - це перетворити відео в анімований GIF. Це дає вам набагато більше контролю, і ви можете просто ставитися до цього, як до образу. Це також єдиний спосіб працювати з мобільним пристроєм, оскільки ви не можете автоматично відтворювати відео. Я знаю, що питання просить зробити це в <img>тезі, але я не бачу слабкої сторони використання " <div>і" робитиbackground-size: cover