iframe後避免空間

-1

這是我用來播放YouTube視頻的代碼。我想減少iframe的height。在這裏，我將height從100%更改爲80%。因此它在視頻和示例文本之間提供了空間。我想避免這個空間。這個怎麼做。任何建議請。iframe後避免空間

.videoWrapper { 
 
\t position: relative; 
 
\t padding-bottom: 56.25%; /* 16:9 */ 
 
\t padding-top: 25px; 
 
\t height: 0; 
 
\t text-align:center; 
 
\t margin-bottom:1%; 
 
} 
 
.videoWrapper iframe { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: 80%; 
 
}

<div class="videoWrapper" id="tmp"> 
 
<iframe id="crntplay" src="http://www.youtube.com/embed/id?autoplay=0" allowfullscreen></iframe> 
 
</div> 
 
some text here

問題：iframe和文本之間避免空間。

來源

2015-08-26 Satya

改變視頻的比例的點，這樣'填充底：56.25％;'似乎是真正的原因，因爲它看起來罰款100％身高而不是80％。嘗試改變這個值。 – dsuess

有沒有機會避免'position：absolute;'或將文本放在'div'中？ – dsuess

@dsues我們也可以在'div'中放置文本。 – Satya

添加負margin-bottom的IFRAME包裝，即：

#videowrapper { 
    margin-top: -80px; 
}

，然後調整幅度，使之成爲你

.videoWrapper { 
 
    position: relative; 
 
    padding-bottom: 56.25%; /* 16:9 */ 
 
    padding-top: 25px; 
 
    height: 0; 
 
    text-align:center; 
 
    margin-bottom: -80px; 
 
} 
 
.videoWrapper iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 80%; 
 
    margin-bottom: -80px; 
 
}

<div class="videoWrapper" id="tmp"> 
 
    <iframe id="crntplay" src="http://www.youtube.com/embed/id?autoplay=0" allowfullscreen></iframe> 
 
</div> 
 
<div id="afteriframe">some text here</p>

來源

2015-08-26 18:55:57

我想用_像素值*來修正距離問題是很困難的，而所有容器都是*有百分比*的親屬。在這個小的預覽框中，這可能看起來很好，但在真實的瀏覽器窗口中可能會有不同的寬度。 – dsuess

@joe_young我需要響應'iframe'。有了這個，我沒有得到它，因爲'高度：80％;' – Satya

設置工作，從CSS中刪除規則。

<iframe width="200" height="200" id="crntplay" src="http://www.youtube.com/embed/id?autoplay=0" allowfullscreen></iframe>

來源

2015-08-26 19:04:36

內聯屬性比CSS規則更具特色，它們壓倒了CSS規則*儘管如此，分離HTML標記和樣式是一種很好的做法。這就是CSS的原因。 – dsuess

當你已經改變了iframeheight你也發生了變化比視頻。它不像以前那樣是16：9。您還有一個div，其中包含一個iframe，其中padding-bottom設置爲56.25% - 這是爲了獲得正確的視頻比率--16：9而設置的。如果你用9除以16，你會得到0,5625，然後乘以100％，你會得到你的56.25％。如果您想通過將視頻的高度從100％降低到80％，然後將0,5625乘以80，您將得到45，並且現在如果將.videoWrapper的padding-bottom更改爲45%並將設置爲iframe返回100%您會在您的問題中看到相同比例的視頻，但您在視頻和文字之間看不到空間。

.videoWrapper { 
 
\t position: relative; 
 
\t padding-bottom: 45%; /* 16:9 */ 
 
\t padding-top: 25px; 
 
\t height: 0; 
 
\t text-align:center; 
 
\t margin-bottom:1%; 
 
} 
 
.videoWrapper iframe { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

<div class="videoWrapper" id="tmp"> 
 
<iframe id="crntplay" src="http://www.youtube.com/embed/id?autoplay=0" allowfullscreen></iframe> 
 
</div> 
 
some text here

但我沒有看到在所有

來源

2015-08-26 19:32:11 Cheslab

iframe後避免空間

回答

相關問題