đưa video youtube vào "khung hình tĩnh" tĩnh và duy trì thay đổi kích thước đáp ứng

Question

Tôi có hình ảnh dưới đây của một Macbook trống.

Hình ảnh là 1034 × 543.

Tôi muốn inset một youtube video bên trong khu vực "màu xám" của màn hình. Tôi muốn nó xuất hiện như thể video youtube đang phát trên màn hình máy tính xách tay.

Tôi cũng muốn hình ảnh trên máy tính xách tay/video youtube có tỷ lệ, để khi trang web ở chế độ xem máy tính bảng hoặc thiết bị di động, hình ảnh và video thu nhỏ lại để khớp.

Tôi đang cố gắng sử dụng fitvid.js để thực hiện việc này nhưng không có may mắn - tôi có thể lấy video để vừa với kích thước tĩnh nhưng tôi không thể làm cho nó vẫn vừa vặn với kích thước hoàn hảo, nó bị biến dạng.

Dưới đây là đánh dấu của tôi hiện tại:

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

Bạn có thể thấm nhuần một số thủ đoạn gian trá với đệm và tỷ lệ phần trăm, như vậy bạn có thể có quy mô cho phù hợp. Về cơ bản, thiết lập một vùng chứa hoàn toàn là% base, với iframe vị trí tuyệt đối có quy mô phù hợp với vùng chứa.

HTML

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

CSS

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

Bạn sẽ chỉ cần thêm box-sizing: border-box; và một số padding đến vị trí các khung nội tuyến trong phạm vi màn hình. Check it out http://jsfiddle.net/41sdho4w/

Để mang nó một chút nữa - đây là một phiên bản với một container để giúp kiểm soát max-width và max-height thay vì sau đó dựa trên cơ thể/viewport http://jsfiddle.net/4g9e3ywy/