響應嵌入Youtube視頻作爲橫幅

我在我的網站上嵌入了一個嵌入式YouTube視頻。它的響應速度和正確調整大小，但我不希望視頻具有100％的高度。我希望它的最大高度爲450px，然後調整大小。響應嵌入Youtube視頻作爲橫幅

// HTML

<div id="video-wrapper"> 
    <div class="video-container"> 
    <iframe src="https://www.youtube.com/embed/DcqJvYF1ewA" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div>

// CSS

#video-wrapper { 
    width: 100%; 
    max-height: 450px; 
} 
.video-container { 
     position:relative; 
     padding-bottom:56.25%; 
     padding-top:30px; 
     height:0; 
     overflow:hidden; 
} 

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

當我給視頻包裝的寬度，可以說80％或400像素的它的工作原理，但我不能做同樣的高度。當我將嵌入類更改爲450px時，它會裁剪視頻。

這裏是我的jsfiddle創建：http://jsfiddle.net/c34phqgo/1/

來源

2016-01-22 Vince Mamba

我希望我理解你的權利，但我認爲這是你的意思。將iframe的最大高度設置爲450px。與屏幕一起縮放。

#video-wrapper { 
    width: 100%; 
    height 100%; 
} 

.video-container iframe, 
.video-container object, 
.video-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    max-height: 450px; 
}

來源

2016-01-22 18:31:09

但是，謝謝你的作品。它會在它下面創建一些空間，所以視頻下方和視頻下方的內容之間存在巨大差距。基本上，它使視頻小，但其周圍的div是100％ –

然後，您可以將＃視頻包裝的最大高度設置爲450px。更新你的小提琴：http://jsfiddle.net/c34phqgo/2/ –

@ Stefan Neuenschwander完美，謝謝。 –

響應嵌入Youtube視頻作爲橫幅

回答

相關問題