Film pełnoekranowy bez czarnych ramek

Question

Problem polega na tym, że wideo zawsze otrzymuje czarne paski po bokach lub na górze/dole w zależności od rozmiaru ekranu.

Każdy pomysł jak je zdobyć pełny ekran zawsze bez pokazywania że irytujących czarnych pasów? i bez użycia wtyczki.

To jest mój znaczników:

<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

spróbuj dodać do swojego CSS

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

Oznacza to, że width: 100%; height: 100% pozwoli element wzrośnie tak bardzo, jak to możliwe, dopóki nie natrafi na maksymalną wysokość lub szerokość 720px lub 1280px odpowiednio.

Jeśli ekran, na którym go wyświetlasz ma większą rozdzielczość, węzeł przestanie się rozwijać, a nie będziesz miał czarnych obramowań.

---

Co więcej, afaik nie jest prawidłowy CSS, czy korzystasz z biblioteki czy coś?

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

---

Edit po odpowiedź zaakceptowana: Pomyślałem o zupełnie innym sposobem osiągnięcia tego celu, ale to wymaga wiele zmienić swojego CSS

.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

Jeśli znasz proporcje filmu, nie należy nawet trzeba Javascript. Możesz użyć wartości procentowej padding-top.

Mogę opublikować kod, ale mimo to polecam przeczytanie this entire article.