響應式iframe保留長寬比

我是新來的編碼和社區，我試圖嵌入YouTube的iframe響應。到目前爲止，我所做的只是用100％替換原始寬度值。響應式iframe保留長寬比

<iframe width="100%" height="315" src="https://www.youtube.com/embed/kXBunIe_PSw" frameborder="0" allowfullscreen></iframe>

是的，這使得它響應，因爲高度是靜態的有很多黑色的空間。有沒有簡單的方法來防止這一點。

我更喜歡css解決方案，但也歡迎javascript。

來源

2017-07-31 Yeşim Ela Gülcan

你可以試試浸軋top'加上'以視頻包裝。 '填充頂部：56.25％'導致16：9寬高比。 –

@Ihazkode所以我應該圍繞iframe創建一個div並添加填充頂部。我正確嗎？ –

.videoWrapper { 
 
\t position:relative; 
 
\t padding-bottom:56.25%; 
 
\t margin:auto; 
 
\t height:0; 
 
} 
 
.videoWrapper iframe { 
 
\t background-color:#f2f2f2; 
 
\t position:absolute; 
 
\t max-width:100%; 
 
\t max-height:315px; 
 
\t width:95%; 
 
\t height:95%; 
 
\t left:0; 
 
\t right:0; 
 
\t margin:auto; 
 
}

<div class='videoWrapper'> 
 
     <iframe id='video' class='trailervideo' width='560' height='315' src='https://www.youtube.com/embed/hhR3DwzV2eA' src='about:blank' frameborder='0' allowfullscreen></iframe> 
 
    </div>

讓我知道，如果它不工作

來源

2017-07-31 07:59:57

這應該幫助您開始。

編號：引導

.responsive { 
 
    position: relative; 
 
    display: block; 
 
    height: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
.responsive iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 0; 
 
} 
 

 
.video { 
 
    padding-bottom: 56.25%; /* or 75% depending upon the type of video you have */ 
 
}

<div class="responsive video"> 
 

 
    <iframe src="https://www.youtube.com/embed/kXBunIe_PSw" allowfullscreen></iframe> 
 

 
</div>

來源

2017-07-31 08:06:28 Aslam

響應式iframe保留長寬比

回答

相關問題