จำลองขนาดพื้นหลัง: ครอบคลุมใน <video> หรือ <img>

ฉันจะจำลองการทำงานของbackground-size:coverองค์ประกอบ html เช่น<video>หรือได้<img>อย่างไร

ฉันต้องการให้มันทำงาน

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

นี่คือสิ่งที่ฉันดึงผมออกไปซักพักหนึ่ง แต่ฉันได้พบกับโซลูชันที่ยอดเยี่ยมที่ไม่ได้ใช้สคริปต์ใด ๆ และสามารถบรรลุการจำลองหน้าปกที่สมบูรณ์แบบในวิดีโอด้วย CSS 5 บรรทัด (9 ถ้าคุณนับตัวเลือกและวงเล็บ ) นี้มี 0 ขอบในกรณีที่มันไม่ทำงานอย่างสมบูรณ์แบบสั้น ๆ ของ CSS3

คุณสามารถดูตัวอย่างได้ที่นี่

ปัญหาเกี่ยวกับวิธีแก้ปัญหาของทิโมธีคือไม่สามารถปรับสเกลได้อย่างถูกต้อง หากองค์ประกอบรอบข้างมีขนาดเล็กกว่าไฟล์วิดีโอก็จะไม่ลดขนาดลง แม้ว่าคุณจะให้ขนาดเริ่มต้นเล็ก ๆ ของแท็กวิดีโอเช่น 16px คูณ 9px แต่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;) วิดีโอก็จะแสดงเช่นกัน

หากคุณต้องการให้วิดีโออยู่ตรงกลางเช่นกันคุณสามารถใช้วิธีการจัดกึ่งกลางแบบ Surefire:

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

คำตอบอื่น ๆ นั้นดี แต่พวกเขาเกี่ยวข้องกับจาวาสคริปต์หรือไม่ได้จัดกึ่งกลางวิดีโอในแนวนอนและแนวตั้ง

คุณสามารถใช้โซลูชัน CSS เต็มรูปแบบนี้เพื่อให้วิดีโอที่จำลองคุณสมบัติพื้นหลัง: หน้าปก:

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

จากคำตอบและความคิดเห็นของ Daniel de Witฉันค้นหาอีกเล็กน้อย ขอบคุณเขาสำหรับการแก้ปัญหา

ทางออกคือการใช้object-fit: cover;ที่มีการสนับสนุนที่ดี(ทุกเบราว์เซอร์ที่ทันสมัยรองรับ) ถ้าคุณอยากที่จะสนับสนุน IE คุณสามารถใช้ polyfill เหมือนวัตถุพอดีภาพหรือวัตถุพอดี

ตัวอย่าง:

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นั้นยอดเยี่ยมมากในการแก้ปัญหาการปรับขนาดของคำตอบของ Timothy (วิดีโอจะขยายขนาด แต่ไม่ลดลงดังนั้นหากวิดีโอของคุณมีขนาดใหญ่มากมีโอกาสที่ดีที่คุณจะเห็นเพียงส่วนเล็ก ๆ อย่างไรก็ตามโซลูชันนั้นตั้งอยู่บนสมมติฐานที่ผิดที่เกี่ยวข้องกับขนาดของคอนเทนเนอร์วิดีโอนั่นคือจำเป็นต้องมีความกว้างและความสูงของวิวพอร์ต 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 คุณจะต้องการเปลี่ยน% padding-bottom% นอกเหนือจากนั้นมันทำงานนอกกรอบ ทดสอบใน IE9 +, Safari 9.0.1, Chrome 46 และ Firefox 41

แก้ไข (17 มีนาคม 2559)

เนื่องจากฉันโพสต์คำตอบนี้ฉันได้เขียนโมดูล 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 polyfill

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

ฉัน gunna โพสต์วิธีการแก้ปัญหานี้เช่นกันเนื่องจากฉันมีปัญหานี้ แต่โซลูชั่นอื่น ๆ ไม่ทำงานสำหรับสถานการณ์ของฉัน ...

ฉันคิดว่าการจำลองbackground-size:cover;คุณสมบัติ css อย่างถูกต้องในองค์ประกอบแทนที่จะเป็นคุณสมบัติภาพพื้นหลังองค์ประกอบคุณจะต้องเปรียบเทียบอัตราส่วนภาพกับอัตราส่วนหน้าต่างปัจจุบันดังนั้นไม่ว่าขนาดใด (และในกรณีที่ภาพนั้นเป็น สูงกว่ากว้างกว่า) หน้าต่างคือองค์ประกอบกำลังเติมหน้าต่าง (และอยู่ตรงกลางแม้ว่าฉันไม่รู้ว่านั่นเป็นข้อกำหนด)

ใช้ภาพเพียงเพื่อความเรียบง่ายฉันมั่นใจว่าองค์ประกอบวิดีโอจะทำงานได้ดีเช่นกัน

ก่อนรับอัตราส่วนองค์ประกอบ (เมื่อโหลด) แล้วแนบตัวจัดการปรับขนาดหน้าต่างเรียกมันครั้งเดียวสำหรับการปรับขนาดเริ่มต้น:

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 คุณสามารถกอง div ด้านล่างวิดีโอได้อย่างง่ายดาย มันครอบคลุม แต่ไม่อยู่กึ่งกลางในขณะที่คุณปรับขนาด

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 ชื่อเสียงจาก Hidden Hobbes ซึ่งสิ้นสุดใน 6 วัน การใช้หน่วย viewport ในการประดิษฐ์เพื่อรับโซลูชัน 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ว่าคำตอบของTimothy Ryan Carpenterไม่ได้คำนึงถึงการcoverอยู่กึ่งกลางของพื้นหลังฉันเสนอการแก้ไข 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

จาวาสคริ

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

หากคุณพลิกถ้าอื่นคุณจะได้รับการบรรจุ

และนี่คือ CSS (คุณไม่จำเป็นต้องใช้มันหากคุณไม่ต้องการตำแหน่งศูนย์ผู้ปกครองต้องเป็น " ตำแหน่ง: ญาติ ")

CSS

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

ฉันเพิ่งแก้ไขปัญหานี้และต้องการแบ่งปัน นี้ทำงานร่วมกับเงินทุน 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