검은 색 테두리가없는 전체 화면 비디오

문제는 화면 크기에 따라 비디오가 항상 측면이나 위쪽/아래쪽에 검은 색 막대를 표시한다는 것입니다.검은 색 테두리가없는 전체 화면 비디오

enter image description here

짜증나는 검은 색 막대 있음을 표시하지 않고 항상 그것을 전체 화면을 얻을 수있는 방법 어떤 생각? 및 플러그인을 사용하지 않고. 당신이 비디오의 화면 비율을 알고 있다면, 당신도 자바 스크립트를 필요가 없습니다

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

출처

2013-06-07 codek

는이에 따라 변경해야 할 당신의 비디오 포맷과 그것의 크기. 스트레칭을 시도 할 수는 있지만 비디오가 이상하게 보일 수 있습니다. – SpYk3HH

비디오의 종횡비가 모니터의 종횡비와 일치하지 않으면 검은 색 막대가 생깁니다. – meagar

이것은 비디오 화면을 올바른 가로 세로 비율로 표시하는 것입니다.이 비율은 JavaScript 또는 CSS가 아닌 비디오 소프트웨어에 의해 제어됩니다 (플래시가 맞습니까?). –

봅니다

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

이 width: 100%; height: 100% 그것이 720px 또는 1280px의 최대 높이와 너비를 돌 때까지 요소가 각각, 그것을 할 수있는만큼 확대 할 수 있습니다 것을 의미합니다.

보고있는 화면의 해상도가 더 높으면 노드 확장이 중단되고 검은 색 테두리가 표시되지 않습니다.

또한 afaik는 다음 CSS가 유효하지 않습니다. 라이브러리를 사용하고 있습니까? 대답은 접수 후

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

는

편집 : 난 그냥이를 달성하기 위해 완전히 다른 방법을 생각했지만, 그것은 당신의 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; 
}

출처

2013-06-07 12:57:58

** 수정 후 작업 편집 ** 및 '코드 수정 용이' – blnc

이 내 마크 업입니다. 백분율 기반 padding-top을 사용할 수 있습니다.

코드를 게시 할 수 있지만 어쨌든 this entire article을 읽는 것이 좋습니다. 당신의 CSS에 추가

출처

2013-06-07 12:49:05 GusRuss89

검은 색 테두리가없는 전체 화면 비디오

답변

관련 문제