mô phỏng kích thước nền: che trên <video> hoặc <img>

Làm thế nào tôi có thể mô phỏng các chức năng của background-size:covertrên một phần tử html như <video>hay <img>?

Tôi muốn nó hoạt động như

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

Đây là điều tôi đã nhổ tóc trong một thời gian, nhưng tôi đã tìm ra một giải pháp tuyệt vời không sử dụng bất kỳ tập lệnh nào và có thể đạt được một mô phỏng bìa hoàn hảo trên video với 5 dòng CSS (9 nếu bạn đếm bộ chọn và dấu ngoặc ). Điều này có 0 trường hợp cạnh trong đó nó không hoạt động hoàn hảo, thiếu khả năng tương thích CSS3 .

Bạn có thể xem một ví dụ ở đây

Vấn đề với giải pháp của Timothy là nó không xử lý tỷ lệ chính xác. Nếu phần tử xung quanh nhỏ hơn tệp video, nó không được thu nhỏ lại. Ngay cả khi bạn cung cấp cho thẻ video một kích thước ban đầu nhỏ, như 16px x 9px, autocuối cùng sẽ buộc nó ở mức tối thiểu của kích thước tệp gốc của nó. Với giải pháp được bình chọn hàng đầu hiện nay trên trang này, tôi không thể giảm quy mô tệp video xuống dẫn đến hiệu ứng thu phóng mạnh.

Tuy nhiên, nếu tỷ lệ khung hình của video của bạn được biết, chẳng hạn như 16: 9, bạn có thể thực hiện các thao tác sau:

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

Nếu thành phần chính của video được đặt để bao phủ toàn bộ trang (chẳng hạn như position: fixed; width: 100%; height: 100vh;), thì video cũng sẽ như vậy.

Nếu bạn cũng muốn video được căn giữa, bạn có thể sử dụng phương pháp định tâm chắc chắn:

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

Tất nhiên, vw, vh, và transformlà CSS3, vì vậy nếu bạn cần khả năng tương thích với các trình duyệt cũ hơn , bạn sẽ cần phải kịch bản sử dụng.

jsFiddle

Sử dụng bìa nền là tốt cho hình ảnh, và chiều rộng 100% cũng vậy. Đây không phải là tối ưu cho <video>, và những câu trả lời này là quá phức tạp. Bạn không cần jQuery hoặc JavaScript để hoàn thành nền video có chiều rộng đầy đủ.

Hãy nhớ rằng mã của tôi sẽ không bao phủ hoàn toàn nền sau với video như bìa, nhưng thay vào đó, nó sẽ làm cho video lớn như cần thiết để duy trì tỷ lệ khung hình và vẫn bao phủ toàn bộ nền. Bất kỳ video dư thừa nào cũng sẽ bị chảy ra khỏi cạnh trang, các mặt phụ thuộc vào nơi bạn neo video.

Câu trả lời khá đơn giản.

Chỉ cần sử dụng mã video HTML5 này hoặc một cái gì đó dọc theo các dòng này: (kiểm tra trong Toàn trang)

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>

Chiều cao tối thiểu và chiều rộng tối thiểu sẽ cho phép video duy trì tỷ lệ khung hình của video, thường là tỷ lệ khung hình của bất kỳ trình duyệt thông thường nào ở độ phân giải bình thường. Bất kỳ video dư thừa chảy máu từ phía bên của trang.

Đối với một số trình duyệt, bạn có thể sử dụng

object-fit: cover;

http://caniuse.com/object-fit

Đây là cách tôi đã làm điều này. Một ví dụ hoạt động là trong jsFiddle này .

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>

Các câu trả lời khác là tốt nhưng chúng liên quan đến javascript hoặc chúng không định tâm video theo chiều ngang VÀ theo chiều dọc.

Bạn có thể sử dụng giải pháp CSS đầy đủ này để có một video mô phỏng thuộc tính kích thước nền: bìa:

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

Dựa trên câu trả lời và bình luận của Daniel de Wit , tôi đã tìm kiếm thêm một chút. Nhờ anh giải pháp.

Giải pháp là sử dụng object-fit: cover;có sự hỗ trợ tuyệt vời (mọi trình duyệt hiện đại đều hỗ trợ nó). Nếu bạn thực sự muốn hỗ trợ IE, bạn có thể sử dụng một polyfill như object-fit-image hoặc object-fit .

Bản trình diễn:

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

và với cha mẹ:

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>

Giải pháp của M-Pixel rất hay ở chỗ nó giải quyết vấn đề mở rộng cho câu trả lời của Timothy (video sẽ tăng lên nhưng không giảm, vì vậy nếu video của bạn thực sự lớn thì rất có thể bạn sẽ chỉ thấy một phần nhỏ được phóng to trong đó). Tuy nhiên, giải pháp đó dựa trên các giả định sai liên quan đến kích thước của bộ chứa video, cụ thể là nó nhất thiết phải bằng 100% chiều rộng và chiều cao của khung nhìn. Tôi đã tìm thấy một vài trường hợp nó không hiệu quả với tôi, vì vậy tôi quyết định tự mình giải quyết vấn đề và tôi tin rằng tôi đã đưa ra giải pháp tối ưu .

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

Nó cũng dựa trên tỷ lệ của video, vì vậy nếu video của bạn có tỷ lệ khác 16/9, bạn sẽ muốn thay đổi% đệm dưới cùng. Ngoài ra, nó hoạt động ra khỏi hộp. Đã thử nghiệm trong IE9 +, Safari 9.0.1, Chrome 46 và Firefox 41.

EDIT (ngày 17 tháng 3 năm 2016)

Vì tôi đã đăng câu trả lời này nên tôi đã viết một mô-đun CSS nhỏ để mô phỏng cả hai background-size: covervà background-size: containtrên <video>các yếu tố: http://codepen.io/benface/pen/NNdBMj

Nó hỗ trợ sắp xếp khác nhau cho video (tương tự background-position). Cũng lưu ý rằng việc containthực hiện không hoàn hảo. Không giống như background-size: contain, nó sẽ không mở rộng video qua kích thước thực của nó nếu chiều rộng và chiều cao của thùng chứa lớn hơn, nhưng tôi nghĩ nó vẫn có thể hữu ích trong một số trường hợp. Tôi cũng đã thêm các lớp đặc biệt fill-widthvà fill-heightmà bạn có thể sử dụng cùng containđể có được sự pha trộn đặc biệt containvà cover... dùng thử, và thoải mái cải thiện nó!

object-fit: cover là câu trả lời tốt nhất với IE, Safari polyfill này.

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

Đó là hỗ trợ img, videovà picturecác yếu tố.

CSS và js nhỏ có thể làm cho video bao phủ nền và tập trung theo chiều ngang.

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: (liên kết điều này với thay đổi kích thước cửa sổ và gọi một lần riêng biệt)

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

Ngay sau phần bình luận dài của chúng tôi, tôi nghĩ đây là thứ bạn đang tìm kiếm, nó dựa trên 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;
}

Đoạn mã trên đang sử dụng chiều rộng và chiều cao của trình duyệt nếu bạn thực hiện điều này trong div, bạn sẽ phải thay đổi nó thành một cái gì đó như thế này:

Dành cho 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;
}

Tôi cũng nên nói rằng tôi chỉ thử nghiệm đây là Google Chrome ... đây là một jsfiddle: http://jsfiddle.net/ADCKk/

Câu trả lời hàng đầu không thu nhỏ video khi bạn ở độ rộng của trình duyệt nhỏ hơn chiều rộng của video. Hãy thử sử dụng CSS này (với #bgvid là id video của bạn):

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

Tôi cũng đang đăng giải pháp này, vì tôi gặp vấn đề này nhưng các giải pháp khác không hoạt động cho tình huống của tôi ...

Tôi nghĩ rằng để mô phỏng chính xác thuộc tính background-size:cover;css trên một thành phần thay vì thuộc tính hình ảnh nền của thành phần, bạn phải so sánh tỷ lệ khung hình của hình ảnh với tỷ lệ khung hình của cửa sổ hiện tại, vì vậy, bất kể kích thước nào (và trong trường hợp hình ảnh là cao hơn rộng hơn) cửa sổ là phần tử đang lấp đầy cửa sổ (và cũng tập trung vào nó, mặc dù tôi không biết đó có phải là một yêu cầu không) ....

sử dụng một hình ảnh, chỉ vì đơn giản, tôi chắc chắn một yếu tố video cũng sẽ hoạt động tốt.

đầu tiên lấy tỷ lệ khung hình của các thành phần (khi nó được tải), sau đó đính kèm trình xử lý thay đổi kích thước cửa sổ, kích hoạt nó một lần cho kích thước ban đầu:

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

sau đó, trong trình xử lý thay đổi kích thước của bạn, trước tiên bạn nên xác định xem nên lấp đầy chiều rộng hoặc chiều cao bằng cách so sánh tỷ lệ khung hình hiện tại của cửa sổ với tỷ lệ khung hình gốc của hình ảnh.

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

}

Cách tiếp cận này chỉ sử dụng css và html. Bạn thực sự có thể xếp một div bên dưới video một cách dễ dàng. Nó là bìa nhưng không phải là trung tâm trong khi bạn thay đổi kích thước.

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 Hobbes

Câu hỏi này có tiền thưởng mở trị giá +100 danh tiếng từ Hidden Hobbes kết thúc sau 6 ngày. Sử dụng sáng tạo các đơn vị khung nhìn để có được giải pháp chỉ CSS linh hoạt.

Bạn đã mở một tiền thưởng cho câu hỏi này cho một giải pháp chỉ CSS, vì vậy tôi sẽ thử. Giải pháp của tôi cho một vấn đề như thế này là sử dụng tỷ lệ cố định để quyết định chiều cao và chiều rộng của video. Tôi thường sử dụng Bootstrap, nhưng tôi đã trích xuất CSS cần thiết từ đó để làm cho nó hoạt động mà không cần. Đây là một mã tôi đã sử dụng trước đó trong số những thứ khác tập trung vào một video được nhúng với tỷ lệ chính xác. Nó cũng hoạt động cho các yếu tố <video>và đó <img>cũng là một trong những yếu tố hàng đầu có liên quan ở đây, nhưng tôi cũng đã đưa cho bạn hai cái còn lại vì tôi đã đặt chúng xung quanh. May mắn nhất! :)

ví dụ toàn màn hình 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>

Để trả lời nhận xét từ chúng tôi rằng câu trả lời của Timothy Ryan Carpenter không giải thích cho coverviệc căn giữa nền, tôi cung cấp bản sửa lỗi CSS nhanh này:

CSS:

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

Thêm hai dòng này sẽ trung tâm bất kỳ yếu tố. Thậm chí tốt hơn, tất cả các trình duyệt có thể xử lý video HTML5 cũng hỗ trợ chuyển đổi CSS3, vì vậy điều này sẽ luôn hoạt động.

CSS hoàn chỉnh trông như thế này.

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

Tôi đã nhận xét trực tiếp về câu trả lời của Timothy, nhưng tôi không đủ danh tiếng để làm điều đó.

Tôi có một giải pháp tốt hơn ngắn và hoạt động hoàn hảo với tôi. Tôi đã sử dụng nó để quay video. Và nó mô phỏng hoàn hảo các tùy chọn bìa trong 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%");
            }
    });

Nếu bạn lật if, nếu không bạn sẽ nhận được.

Và đây là css. (Bạn không cần sử dụng nó nếu bạn không muốn định vị trung tâm, div cha phải là " vị trí: tương đối ")

CSS

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

Tôi chỉ giải quyết điều này và muốn chia sẻ. Điều này hoạt động với Bootstrap 4. Nó hoạt động với imgnhưng tôi đã không kiểm tra nó với video. Đây là HAML và 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>

Câu hỏi cũ, nhưng trong trường hợp bất cứ ai nhìn thấy điều này, câu trả lời tốt nhất theo ý kiến ​​của tôi là chuyển đổi video thành GIF hoạt hình. Điều này cho phép bạn kiểm soát nhiều hơn và bạn chỉ có thể coi nó như một hình ảnh. Đó cũng là cách duy nhất để nó hoạt động trên thiết bị di động, vì bạn không thể tự động phát video. Tôi biết câu hỏi đang yêu cầu thực hiện trong <img>thẻ, nhưng tôi không thực sự thấy nhược điểm của việc sử dụng <div>và làmbackground-size: cover