정적 인 이미지 "프레임"에 youtube 비디오를 감싸고 반응적인 크기 조절을 유지하십시오

Question

아래 빈 Macbook 이미지가 있습니다.

이미지는 내가 화면의 "회색"영역의 내부에 YouTube 동영상을 걸고 싶어 1034 × 543

입니다. YouTube 동영상이 랩톱 화면에서 재생되는 것처럼 보이게하려고합니다.

웹 페이지가 태블릿 또는 모바일보기에있을 때 랩톱 이미지/YouTube 비디오가 확대되어 이미지와 비디오가 축소되도록합니다.

이 작업을 수행하기 위해 fitvid.js을 사용하려고 시도했지만 운이 좋지는 않습니다. 비디오를 한 정적 크기에 맞출 수는 있지만 크기가 완벽하게 맞지 않을 경우 변형됩니다.

HTML :

<div class="col-sm-12"> 
    <div class="title"> 
    <h2>What's New</h2> 
    <small>ASC Sneak Peak</small> 
    </div> 
    <div class="macbook-wrapper"> 
    <iframe width="715" height="402" src="//www.youtube.com/embed/**url**" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div> 

SASS : 당신은 패딩 및 백분율 몇 가지 속임수를 주입 할 수

.macbook-wrapper{ 
    background: url('../img/content/home/macbook.png') no-repeat; 

    .fluid-width-video-wrapper { 
    width: 97.5%; 
    background: #000; 
    } 
} 

Answer 1

, 당신은 할 수 그런 식으로 아래

내 현재의 마크 업입니다 그에 따라 규모를 조정하십시오. 기본적으로 컨테이너에 따라 비례하여 절대적으로 위치가 iframe 인 순전히 % 기본 컨테이너를 설정합니다.

HTML

<div> 
    <iframe></iframe> 
</div> 

CSS 당신은 box-sizing: border-box;를 추가 할 필요가 단지 것

div { 
    position: relative; 
    padding-top: 25px; 
    padding-bottom: 67.5%; 
} 
div iframe { 
    background: url(http://i.stack.imgur.com/zZNgk.png) center center no-repeat; 
    background-size: contain; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

일부 padding 화면 내에서 iframe이 위치합니다. 그것을 밖으로 체크 http://jsfiddle.net/41sdho4w/

더 그것을 조금 걸릴하려면 - 여기 http://jsfiddle.net/ 같은 max-width 및 max-height이보다는 몸에 의존을 제어 할 수 있도록하는 컨테이너와 버전/뷰포트 http://jsfiddle.net/4g9e3ywy/