如何讓Youtube嵌入適合屏幕高度，同時讓其寬度溢出

我正在構建一個網站，其中包含嵌入的YouTube作爲標題。這個youtube嵌入在任何瀏覽器大小都能夠很好地響應和擴展，但是有一個問題：即使使用填充底部：56.25％的技巧，視頻比屏幕大小高，而寬度是完美的。我需要某種解決方案來使視頻的高度與視口大小相匹配，並在視頻中裁剪或隱藏任何「額外」寬度。如何讓Youtube嵌入適合屏幕高度，同時讓其寬度溢出

HTML：

<header class="postingHeader"> 
    <div class="video-container"> 
    <div id="my-video"></div> 
    <div id="quoteContainer"> 
    <h1 id="bioTitle2">"Title"</h1> 
    <p id="bioQuote2">「Quote」</p> 
    </div> 
    </div>

CSS：

.video-container { 
position: relative; 
padding-bottom: 56.25%; 
height: 0; 
overflow: hidden;} 

.video-container iframe, .video-container object, .video-container embed, .video-container img { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
    }

我是16:10的屏幕測試，這和它看起來完美。提前致謝。

來源

2014-10-30 Julián Fernández Osom

喜看出來。你解決了這個問題嗎？我面對同樣的事情。 – Nerdar 2017-10-18 14:52:35

你爲什麼要這麼做？你不想讓人們看到完整的視頻嗎？

你可以通過將你的響應容器包裝在一個div中來實現這個功能，它有溢出隱藏集合。然後使用一些JavaScript來添加視口的高度作爲高度，所以它確實覆蓋了整個屏幕。

$(document).ready(function(){ 
    height = $(window).height(); 
    $(".viewport_control").css({"height": height}); 
});

你也可能要居中的視頻，所以加

top: 50%; 
left: 50%; 
transform: translate(-50%, -50%)

我建你codepen這樣你就可以在行動

http://codepen.io/bekreatief/pen/Hirbq/

來源

2014-10-30 19:47:14 KreaTief

如何讓Youtube嵌入適合屏幕高度，同時讓其寬度溢出

回答

相關問題