用iFrame和圖像舍入Div角落

我在嘗試圍繞包含圖像和iframe的YIV的這些div的角落時遇到了一些問題。。用iFrame和圖像舍入Div角落

我試圖讓每個人盒的視頻，甚至出現在褪色後四捨五入在這裏你可以看到這一點：example

每當我加邊界半徑：10px的;到視頻容器CSS和caption-style-4 img CSS，它會圍繞每個角落，除了右上角以及鼠標懸停之後，在再次出現圓角之前，將暫時恢復爲無圓角。

這是不帶圓角的視頻容器的CSS：

video-container { 
    width: 310px; 
    margin: 7px; 
    height: 310px; 
    border-radius: 0px; 
    overflow: hidden; 
    display: none; float: left; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
    text-align: center; 
    position: relative; 
} 

.caption-style-4 li:hover .caption{ 
    opacity: 1; 

} 

.caption-style-4 img{ 
    margin: 0px; 
    padding: 0px; 
    border-radius: 10px; 
    float: left; 
    z-index: 4; 
} 


.caption-style-4 img{ 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    z-index: 4; 
}

這是視頻容器之一的HTML代碼：

<ul class="caption-style-4"><li> 
<a href="http://www.youtube-nocookie.com/embed/Ay7Z45XTlIg? iframe=true&width=853&height=480" rel="prettyPhoto[iframes]" > 
    <img src="http://8-playerpictures.com/wp-content/uploads/2014/04/NCAA-Innovation-Summit.png" alt="NCAA Innovation Summit-Ashley Johnson"/> 
    <div class="caption"> 
       <div class="blur"></div> 
       <div class="caption-text"> 
        <h1>NCAA Innovation Summit</h1> 
        <p></p> 
       </div>    
      </div> 
     </li> 
     </ul>

有它贏得了」的理由t與iFrame一起工作？這只是一個不在正確的地方添加它的問題嗎？

我感謝你的幫助！

來源

2015-02-09 Francesca

它看起來像你使用的是一個鏈接，而不是一個iFrame。 – BDawg 2015-02-09 20:27:19

在8人圖片網站上，他們正在繞過使用JavaScript的定位標記的正常行爲。如果JavaScript不支持，他們會將錨標記作爲備用，以便直接將它們帶到YouTube以查看視頻（這是您的標記所做的，因此您無法應用CSS）。在支持JavaScript的地方，他們在單擊錨標籤並取消正常行爲時創建嵌入式iFrame。你可能沒有那個相同的編碼，所以你會想要實現它，或者找到一個直接使用iFrame的不同方式。

我希望有幫助！

來源

2015-02-09 20:52:10 BDawg

用iFrame和圖像舍入Div角落

回答

相關問題