Question

我在尝试围绕这些div的角落时遇到一些问题，其中包含Youtube的图像和iframe。

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

每当我添加border-radius：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>

是否有理由不能使用iFrame？这只是不在正确的地方添加它的问题吗？

感谢您的帮助！

Answer 1

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

我希望有所帮助！

使用iFrame和Image舍入Div角

1 个答案: