YouTube影片高度比，拉伸至窗口寬度＆拉伸外父容器

我有YouTube嵌入div內部。這個div，.entry-content，有一個max-width的30em。 YouTube嵌入我想成爲全窗口寬度，伸展在#container之外。要做到這一點，我有一個JS腳本，我已經成功地使img元素伸展到entry-content之外。 img已在0123中確定width:100vw。YouTube影片高度比，拉伸至窗口寬度＆拉伸外父容器

iframe在div中，fluid-width-video-wrapper，因爲使用了FitVids jQuery plugnin。

這裏的腳本「外父元素拉伸」：

var bodyWidth = $('body').width(); 
    var elemWidth = $('.entry-content p').width(); 
    var margin = bodyWidth-elemWidth; 
    var dividedMargin = margin/2; // Divide the margin by 2 
    var negativeMargin = dividedMargin * -1; // set number to negative number 
    $('.entry-content iframe').css("margin-left", negativeMargin + "px");

我也用這個爲$(window).resize()，使其無論利潤率/墊襯拉伸全屏顯示。

width:100vw寬度不適用於CSS中的iframe，所以我使用了this fiddle的腳本。

$('.entry-content iframe').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' */});

然而，正如你可以在撥弄看到它使視頻全屏。我想要全角與正確的縱橫比。我應該在這個腳本中使用height？

它必須是流體，作爲窗口尺寸而變化。我也使用它$(window).resize();，這會使頁面變慢，但現在這不是問題。

來源

2015-06-02 mizuki

'的iframe { 寬度：100vw; 身高：100vh; }'你是否以這種方式嘗試？ –

它使視頻全屏。我需要寬高比保持不變。 – mizuki

只是爲了說清楚，給我們看一個例子 –

我想我找到了現在的自由容器的解決方案，這也可與我鎖定到邊緣的腳本。

$('.entry-content iframe').css({ width: $(window).innerWidth() + 'px', height: (($(window).innerWidth())*0.5625) + 'px' });

由於視頻的高度應爲56.25％，並且寬度是窗口內部寬度的100％，則意味着高度應的窗口寬度的56.25％。

來源

2015-06-02 14:53:21 mizuki

不需要JS。以下是您需要製作響應式播放器的全部信息，它的寬度爲父寬度的100％，寬高比爲16：9。

body{ 
 
    margin:0; 
 
} 
 

 
.videoContainer { 
 
    width: 100vw; /*now it is 100% of viewport (window) width.*/ 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.videoContainer::after { 
 
    padding-top: 56.25%; /* 16:9 ratio - divide height by width and multiply by 100 */ 
 
    display: block; 
 
    content: ''; 
 
} 
 

 
.videoContainer>iframe{ 
 
    display:block; 
 
    width:100%; 
 
    height:100%; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
}

<div class="videoContainer"> 
 
    <iframe src="https://www.youtube.com/embed/U5LwcvVAKDg" frameborder="0" allowfullscreen></iframe> 
 
</div>

來源

2015-06-02 12:45:54

好的解決方案，但這不是我所追求的。我的視頻容器需要比父寬度更寬的寬度。它需要伸展到父窗口之外，因此它是窗口（或身體）寬度的100％。 – mizuki

只需將'％'更改爲'vw'。我編輯了上面的代碼來展示我的意思。 –

它的工作原理，但我不明白爲什麼它不能與我的「捕捉左邊緣」腳本。 – mizuki

是有一個可能性，如果你在「PX」代替使用「100％」你得到你想要的是什麼？

編輯*

我很抱歉，我張貼的答案，我張貼後，我紅ILPO奧克薩寧的評論，但我認爲這是解決方案。如果沒有請詳細說明您的問題

來源

2015-06-02 13:46:46 santinobonora

YouTube影片高度比，拉伸至窗口寬度＆拉伸外父容器

回答

相關問題