用圖像和YouTube響應畫廊嵌入寬高比

這是一個詞棘手的問題正確，所以我創建了一個小提琴更精確地表示我想要做的事：用圖像和YouTube響應畫廊嵌入寬高比

.thumbnailContainer.video_embed 
{ 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
} 

.thumbnailContainer.video_embed iframe 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

上面的代碼完美適用於非常好的響應式YouTube視頻。但是...

如果您想象一下在媒體庫中圖像和視頻應該在完全響應式設計中共存的情況。

將會有行和行的媒體，並且圖像和視頻之間的縱橫比可能存在差異，因此我們留下的東西不再統一。

實際上，YouTube視頻應該是100％寬，但它的高度應該不會比圖片更高也不會更短。我以前有一個版本，這是所有固定的寬度和高度，所以很簡單，每個圖像和每個iframe是200 x 200.現在，我想要更多的移動友好的東西，儘管圖像我確切地是如何我需要他們，視頻不是。

任何想法？

最終的解決方案（如果有的話）應該最好只用CSS，而不一定專用於YouTube（某些視頻將是其他服務，但主要通過YouTube等iframe進行渲染）。

你們真棒，所以希望你會想出一些很酷的東西。非常感謝。

來源

2013-09-23 SpongeBobPHPPants

可能重複[？如何強制兒童事業部於母公司的股利的100％無指定家長的高度（http://stackoverflow.com/questions/1122381/how-to-力兒童DIV至100-的父母-DIV-withou t-specify-parents-heigh） – isherwood

這裏最好的選擇是使用YouTube API並檢索代表視頻的縮略圖，然後您將擁有一致的圖片庫。然後點擊加載視頻在較大的iframe或'fancybox'類型的縮放插件。 –

@ivarPrudnikov，不幸的是問題仍然存在，即使它是一個圖像，而不是一個iframe。 – SpongeBobPHPPants

100％的高度是具有挑戰性的，因爲你可以在這裏看到：How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

你最好的選擇可能是使用jQuery，如果這是一個選項。

來源

2013-09-23 16:12:24 isherwood

你可以嘗試給兩個.thumbnailContainer和.thumbnailContainer.video_embed iframe班MIN-和最大高度。當然，這在手機上未經測試，我不確定寬高比如何影響無響應視頻嵌入。希望這可以幫助。

DEMO這裏。下面的代碼片段：

.thumbnailContainer 
{ 
    overflow: hidden; 
    position: relative; 
    width: 100%;  
    min-height: 200px; 
    max-height: 200px; 
} 

.thumbnailContainer.video_embed iframe 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    min-height: 200px; 
    max-height: 200px; 
}

來源

2013-09-23 16:17:31

可悲的是，這並不像預期的那樣工作，但我昨晚走了這條路。問題是它破壞了設計的響應性。它限制了需要修復的高度，所以它不會達到預期的效果。非常感謝你的努力:) – SpongeBobPHPPants

我認爲這可能是有用的文件，我已經決定要做到這一點。

@ivarPrudnikov建議您從API中抓取YouTube縮略圖。我已經考慮過一些事情，但是，當然，縮略圖容器是否包含iframe，文本或圖像並不重要，但存在同樣的問題。

沒有一個簡單的方法來保持該容器的尺寸與其他容器的尺寸相同，而不存在具有確切高寬比的圖像。

可能還有其他方法......但我開始覺得它們太複雜了，很難繼續前進，也許會遇到某些瀏覽器的兼容性問題。

所以，我採取了一切服務器端。

這一切都寫在PHP無論如何，所以我實際上通過YouTube視頻ID PHP腳本，直接從YouTube獲取的縮略圖，然後我裁剪和調整它的基礎上所需的縮略圖的寬度。高度和長寬比。

這一切都發生在飛行。我會更可能實現某種基本的緩存機制，我最終實際上將圖像保存在本地。

直到這時，問題就解決了，我非常感謝你給大家誰也時間來回答和/或評論。

非常感謝，永遠！

Chris

來源

2013-09-24 00:42:13 SpongeBobPHPPants

這就是我使用的。它根據嵌入寬度和高度屬性設置填充並計算寬高比。只要你在iframe周圍有2個div（你可以調整嵌入），並將寬度和高度設置爲iframe中的一個屬性，這將起作用。

jQuery(document).ready(function() { 
    jQuery('.embed-wrapper').each(function(){ 
     dcembedheight = jQuery('iframe', this).attr("height"); 
     dcembedwidth = jQuery('iframe', this).attr("width"); 
     ratio = ((dcembedheight/dcembedwidth)*100).toPrecision(4) + '%'; 
     jQuery(this).attr("style" , "max-width:"+ dcembedwidth + "px"); 
     jQuery('.embed-container', this).css({"padding-bottom": ratio}); 
    }); 
});

HTML - 排除嵌入的包裝器寬度爲100％，並只使用的CSS以16：9的比例

<div class="embed-wrapper"> 
<div class="embed-container"> 
<iframe src="//giphy.com/embed/BVNbHPjIfSNOw" width="480" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
</div> 
</div>

CSS - 注意到填充由jquery的設定，但CSS包含默認的16：9比例的填充

.embed-container { 
position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}

的

來源

2015-02-25 15:07:41 Allon

用圖像和YouTube響應畫廊嵌入寬高比

回答

相關問題