使用 iFrame 和 Image 圆角 Div答案

【问题标题】：Rounding Div corners with iFrame and Image使用 iFrame 和 Image 圆角 Div
【发布时间】：2015-04-09 16:06:31
【问题描述】：

我在尝试绕过这些包含 Youtube 图像和 iframe 的 div 的角落时遇到了一点问题。

我试图让每个带有视频的单独框即使在淡入之后也显示为圆形。您可以在这里看到：example

每当我添加border-radius:10px;对于 video-container 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>

它不能与 iFrame 一起使用是否有原因？这只是没有在正确的地方添加它的问题吗？

感谢您的所有帮助！

【问题讨论】：

看起来您使用的是链接，而不是 iFrame。

标签： html css iframe youtube

【解决方案1】：

在 8-Player Pictures 网站上，他们使用 JavaScript 绕过锚标记的正常行为。他们有锚标记作为备份，以防不支持 JavaScript，因此它将直接将他们带到 YouTube 上观看视频（这是您的标记所做的，因此您不能应用 CSS）。在支持 JavaScript 的情况下，当单击锚标记并取消正常行为时，它们会创建一个嵌入式 iFrame。您可能没有相同的编码，因此您希望实现它或找到直接使用 iFrame 的不同方式。

希望对你有帮助！

【讨论】：