Video toàn màn hình không có viền đen

Question

Sự cố tôi gặp phải là video luôn có các thanh màu đen ở hai bên hoặc trên đầu/cuối tùy thuộc vào kích thước màn hình.

Bất kỳ ý tưởng làm thế nào để có được nó toàn màn hình luôn mà không thấy các thanh màu đen gây phiền nhiễu? và không cần sử dụng plugin.

Đây là đánh dấu của tôi:

<div id="full-bg"> 
     <div class="box iframe-box" width="1280" height="800"> 
      <iframe src="http://player.vimeo.com/video/67794477?title=0&amp;byline=0&amp;portrait=0&amp;color=0fb0d4" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
     </div> 
    </div> 

#full-bg{ 
     width: 100%; 
     height: 100%; 
     img{ 
      display: none; 
     } 
     .iframe-box{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      background: url(../img/fittobox.png); 
      left: 0 !important; 
      top: 0 !important; 
      iframe{ 
       width: 100%; 
       height: 100%; 
      } 
     } 
    } 

Answer 1

Hãy thử thêm vào CSS của bạn

.iframe-box { 
    max-width: 1280px; /* video width */ 
    max-height: 720px; /* video height */ 
} 

Điều này có nghĩa rằng width: 100%; height: 100% sẽ cho phép các phần tử sẽ mở rộng nhiều như nó có thể, cho đến khi nó chạm chiều cao tối đa hoặc chiều rộng của 720px hoặc 1280px, tương ứng.

Nếu màn hình bạn đang xem có độ phân giải lớn hơn, nút sẽ ngừng mở rộng và bạn sẽ không có viền đen.

---

Hơn nữa, sau đây không phải là CSS hợp lệ, bạn đang sử dụng thư viện hay cái gì đó?

#full-bg { 
    .iframe-box { 
     foo: bar; 
    } 
} 

---

Chỉnh sửa sau khi trả lời chấp nhận: tôi chỉ nghĩ đến một cách hoàn toàn khác nhau để đạt được điều này, nhưng nó sẽ yêu cầu bạn phải thay đổi rất nhiều CSS của bạn

.fittobox {    /* give fit to box an aspect ratio */ 
    display: inline-block; /* let it be styled thusly */ 
    padding: 0;   /* get rid of pre-styling */ 
    margin: 0; 
    width: 100%;   /* take up full width available */ 
    padding-top: 56.25%; /* give aspect ratio of 16:9; "720/1280 = 0.5625" */ 
    height: 0px;   /* don't want it to expand beyond padding */ 
    position: relative; /* allow for absolute positioning of child elements */ 
} 

.fittobox > iframe { 
    position: absolute; /* expand to fill */ 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
} 

Answer 2

Nếu bạn biết tỉ lệ khung hình của video của bạn, bạn nên thậm chí không cần javascript. Bạn có thể sử dụng một phần trăm dựa trên padding-top.

Tôi có thể đăng mã, nhưng tôi khuyên bạn nên đọc this entire article.