在jQuery Masonry中調整iframes的高度（YouTube嵌入）

這裏總的noob，嘗試將嵌入YouTube視頻的jquery masonry頁面放在一起。在jQuery Masonry中調整iframes的高度（YouTube嵌入）

問題是，視頻的高度不調整，我無法弄清楚如何得到正確的比例。

我已經看過以下鏈接，但我無法弄清楚如何將這些想法合併到我的代碼中。

Jquery - How do I dynamically adjust height of iframe?
Adjust Height of iFrame When New Content is Loaded

我的下面代碼整個塊。您會注意到div對圖像的調整很好，但未能針對嵌入的YouTube視頻進行適當調整。

我哪裏錯了？任何幫助，將不勝感激......

<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width"> 
<title>Article Title</title> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

<style> 
body { 
    font: 1em/1.67 Arial, Sans-serif; 
    margin: 0; 
    background: #e9e9e9; 
} 

img, iframe { 
max-width: 100%; 
height: auto; 
display: block; 
} 

.wrapper { 
    width: 95%; 
    margin: 3em auto; 
} 

.masonry { 
    margin: 1.5em 0; 
    padding: 0; 
    -moz-column-gap: 1.5em; 
    -webkit-column-gap: 1.5em; 
    column-gap: 1.5em; 
    font-size: .85em; 
} 

.item { 
    display: inline-block; 
    background: #fff; 
    padding: 1.5em; 
    margin: 0 0 1.5em; 
    width: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.18); 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
} 

.title, .footer { 
text-align: center; 
} 

.title h1 { 
margin: 0; 
} 

.title a { 
display: inline-block; 
padding: .75em 1.25em; 
color: #888; 
border: 2px solid #aaa; 
margin: .25em 1em 1em; 
text-decoration: none; 
border-radius: 3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
-ms-border-radius: 3px; 
-o-border-radius: 3px; 
} 

.title { 
color: #666; 
} 

.title a:hover { 
color: #666; 
border-color: #888; 
} 

.footer { 
font-size: .75em; 
} 

.footer, .footer a { 
color: #888; 
} 


@media only screen and (max-width: 800px) { 
    .masonry { 
     -moz-column-count: 1; 
     -webkit-column-count: 1; 
     column-count: 1; 
    } 
} 


@media only screen and (min-width: 800px) { 
    .masonry { 
     -moz-column-count: 2; 
     -webkit-column-count: 2; 
     column-count: 2; 
    } 
} 

@media only screen and (min-width: 900px) { 
    .masonry { 
     -moz-column-count: 2; 
     -webkit-column-count: 2; 
     column-count: 2; 
    } 
} 

@media only screen and (min-width: 1100px) { 
    .masonry { 
     -moz-column-count: 2; 
     -webkit-column-count: 2; 
     column-count: 2; 
    } 
} 

@media only screen and (min-width: 1280px) { 
    .wrapper { 
     width: 1260px; 
    } 
} 
</style> 


<style> 
body { 
margin: 0; 
} 
.labs-header a { 
text-decoration: none; 
display: inline-block; 
vertical-align: middle; 
padding: 1em 2em; 
} 
.labs-header, 
.labs-header a { 
color: rgba(0, 0, 0, .5); 
} 
.labs-header a:hover { 
color: rgba(0, 0, 0, .75); 
} 
.labs-header.dark, 
.labs-header.dark a { 
color: rgba(255, 255, 255, .5); 
} 
.labs-header.dark a:hover { 
color: rgba(255, 255, 255, .75); 
} 
</style> 

</head> 

<body> 
<header class="labs-header"> 
</header> 

<div class="demo-wrap"> 
<div class="wrapper"> 
<div class="title"><h1>Responsive CSS Masonry</h1></div> 

<div class="masonry"> 
<div class="item">Hello, this is a really really really really really really really really really really really really really really long sentence.</div> 
<div class="item"><iframe width="560" height="315" src="https://www.youtube.com/embed/c5nbLCuiGiU" frameborder="0" allowfullscreen></iframe></div> 
<div class="item">Hello!</div> 
<div class="item"><img src="http://sites.psu.edu/siowfa14/wp-content/uploads/sites/13467/2014/10/female-red-eyed-tree-frog-tree-frogs-11755689-600-426.jpg"></div> 
</div> 

</body> 

</html>

感謝您的幫助......

來源

2015-04-23 RollingStone1234

解決它。我所要做的就是刪除下面的一段代碼：

img, iframe { 
max-width: 100%; 
height: auto; 
display: block; 
}

來源

2015-04-23 17:30:21 RollingStone1234

在jQuery Masonry中調整iframes的高度（YouTube嵌入）

回答

相關問題