전체 너비 vimeo 래퍼 배경

Question

전신 iframe vimeo 배경을 내 본문 div에있는 패턴으로 덮어 쓰려고합니다. 비디오는 오버레이로 덮여있어 클립 할 수 없게됩니다. Ive는 비디오를 100 % 너비와 높이로 제공하려고 시도했지만 화면을 덮는 데는 아무런 운이 없었습니다. 동영상을 500x250 픽셀로 팝업하려고했습니다.

HTML을

<div class="video">  
    <iframe src="//player.vimeo.com/video/82123812?title=0&amp;byline=0&amp;portrait=0&amp;color=3a6774&amp;autoplay=1&amp;loop=1" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
    <div class="overlay"></div> 
</div> 

CSS

.video { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100% 
} 

.video .overlay { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: url(../img/overlay-pattern.png) repeat; 
} 

Answer 1

당신은 폭과 높이가 iframe뿐만 아니라 래퍼를 설정해야합니다. 행운을 빌어 Z- 색인을 추가했습니다! http://jsfiddle.net/n28Ef/1/

.video { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
} 

.video iframe { 
    position: absolute; 
    z-index: 1; 
    width: 100%; 
    height: 100%; 
} 

.video .overlay { 
    position: absolute; 
    z-index: 2; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: url(../img/overlay-pattern.png) repeat; 
} 

Answer 2

이 솔루션은 전체 CSS에 이미지 대신은 iframe을 사용하여 CSS 속성 background-size: cover를 복제 :

헤이 속이다의 속이다, 여기에 바이올린입니다.

<div class="iframe-wrapper"> 
    <iframe src="https://player.vimeo.com/video/123456789?autoplay=1&loop=1&byline=0&title=0"> 
</div> 

그런 다음 그 스타일 적용 :

먼저, 래퍼에서 비 메오은 iframe을 넣어 메오의 경우, 또한

/* Makes a fixed background wrapper 
which the user cannot interact with */ 

.iframe-wrapper { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
    pointer-events: none; 
    overflow: hidden; 
} 

/* Make the iframe keep an aspect ratio, and 
position it in the middle of its parent wrapper*/ 

.iframe-wrapper iframe { 
    width: 100vw; 
    height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */ 
    min-height: 100vh; 
    min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

을하는 프로 계정이 당신에게주는 플레이어의 컨트롤을 제거하는 기능.