在靜態圖像「框架」中包裝YouTube視頻並保持響應調整大小

我有一個空白Macbook的下面的圖像。在靜態圖像「框架」中包裝YouTube視頻並保持響應調整大小

enter image description here

的圖像是1034×543。

欲嵌入屏幕的「灰色」區的內部的YouTube視頻。我希望它看起來好像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; 
    } 
}

來源

2014-08-29 Prefix

喜歡的東西http://jsfiddle.net/ 41sdho4w /？只是想在發佈答案之前正確理解你的問題。 – Evan 2014-08-29 18:04:20

@Evan：確切地說。：D – Prefix 2014-08-29 18:06:56

太棒了，我確信有很多方法可以做到這一點，但這是我將如何解決它。 @我的評論如下，我所說的是，你可以用CSS構建一個圍繞iframe的macbook，並且在沒有所有定位和超精確的填充的情況下也可以使用該規模。 – Evan 2014-08-29 18:13:01

你可以灌輸一些權謀與填充和百分比，這樣你可以有相應的規模。基本上，建立一個完全位於％base的容器，並具有絕對位置的iframe，以相應地縮放容器。

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

你只需要添加box-sizing: border-box;有的padding定位在屏幕內的iframe。檢查出來http://jsfiddle.net/41sdho4w/

把它遠一點 - 這裏是與容器的一個版本，以幫助控制max-width和max-height而不是在身體上依靠/視http://jsfiddle.net/4g9e3ywy/

來源

2014-08-29 18:11:38 Evan

嗨！感謝偉大的解決方案，它的作品，但macbook是100％的頁面寬度。我希望它能夠優雅地向下縮放，但不會超過1034x543。如果我將最大寬度和最大高度添加到容器div，它似乎與iframe填充混亂 – Prefix 2014-08-29 18:35:26

我的壞！讓我更新它，可能只需要一個指定的容器，％可以基於此容器。 – Evan 2014-08-29 18:44:27

我爲整個事物創建了一個額外的容器 - 這是您可以設置所需的最大寬度/最大高度的位置 - 並且子元素％padding/width等將依賴於此。 – Evan 2014-08-29 18:46:57

在靜態圖像「框架」中包裝YouTube視頻並保持響應調整大小

回答

相關問題