为嵌入的 YouTube 视频添加边框半径

Posted 2023-02-24

【中文标题】为嵌入的 YouTube 视频添加边框半径

【英文标题】：Adding border-radius for embedded YouTube video

【发布时间】：2011-12-10 08:02:55

【问题描述】：

请参阅this fiddle。在加载 border-radius 之前立即注意工作正常。几毫秒后，圆角消失。

如何为嵌入的 YouTube 视频添加圆角？

【问题讨论】：

我确定这与 Flash 不关心您的 CSS 圆角有关。我很好奇这是否适用于 html5 视频元素。

视频本身应该有圆角（几乎不可能）还是带有圆角的黑色容器可以工作？

当我们的网站首次启动时，我已经完成了这项工作。圆角在 YouTube 视频上运行良好——直到最近，也许是几周前。突然间，YouTube 视频的表现与您描述的一样——圆形容器首先显示，方形视频在其上方弹出。在此问题出现的同时，我们的 YouTube 视频停止在 Firefox 中显示。删除边框半径代码使视频在 Firefox 中显示良好。奇怪的是它曾经如何工作，但现在不行。没有更改我的网页或样式表。尽我所能，它与 Yo

的变化有关

【参考方案1】：

首先浏览器将其视为任何其他块元素并应用边框半径。然后 flash 对象完成加载并越过顶部，因为无法在 flash 对象上使用边框半径，它们会消失。

【讨论】：

好的，感谢您的提醒。你觉得有办法解决吗？

我怀疑它，因为它是一个插件，所以它可以做它喜欢的事情，而且 CSS3 还没有发布，所以它不兼容所有东西。您可以在具有圆角的对象周围制作一个包装 div，但这会增加整体尺寸。或者您可以在对象顶部的每个角落放置四个图像？不过，将东西放在 Flash 对象上并不简单。

【参考方案2】：

为了创建圆角的外观，您必须制作四个看起来像圆角的覆盖divs，并将它们放置在每个角上。根本不是一个优雅的解决方案，但它是创造这种效果的唯一方法。

【讨论】：

你为什么声称这是唯一可能的方法？

具有边框半径的容器不会一致地裁剪其中包含的内容，尤其是 Flash 内容。如果您要创建一个单独的 div 叠加层，我想它会导致无法单击视频中的任何控件，这就是为什么我认为四个绝对定位的角 div 是唯一的方法。

【参考方案3】：

只有在 youtube 播放器打开 HTML5 模式时才能实现。

在这里演示：http://jsfiddle.net/3f9DB/1/

【讨论】：

你用什么浏览器测试？由于缺少 CSS3 和 HTML5 支持，这不适用于 9 号之前的 IE。

假设除了将 iframe 包含在像 jsfiddle.net/3f9DB/3 这样的块元素中之外，没有简单稳定的解决方案

当我运行那个演示 (FF7) 时，我得到了 Flash 内容。

【参考方案4】：

如果允许，请尝试直接嵌入/对象（最好使用 swfobject 或其他东西）和 wmode = transparent 或 wmode opaque（首选）

http://jsfiddle.net/AkPXj/19/

【参考方案5】：

您只需设置border: 样式：

border:20px solid #000;

http://jsfiddle.net/jalbertbowdenii/AkPXj/20/

【讨论】：

虽然您在技术上是正确的，因为问题是如何提出的，但显然它已经足够好并且问题意味着什么。感谢您的参与。

在网页开发的游戏中，没有作弊。在我看来，如果一项技术产生了预期的结果，那就很好了。我的意思是，如果方法很糟糕，没有人会使用它;--)

@albert 因为提问者意识到没有办法达到这个结果，但它是最接近的。

感谢您对他的回应。这已经快一年了，加上你的评论已经有一个多月了。你肯定有更好的事情要做，不是吗？

你的问题中是否也漏掉了游戏规则？你的意思是在玩的时候解决我的边界半径问题吗？无论如何，你必须定义打得好，因为显然我们的 webdev 规则不同，所以我确信我们打得好的规则不同。你问了一个问题。我抽出时间来解决它。你会觉得这玩得不“好”。我认为这是对这是多么荒谬的诚实调查。

【参考方案6】：

你可以像这样包装 iframe：http://jsfiddle.net/xmarcos/D4sS7/

【参考方案7】：

不幸的是，由于旧版浏览器之间存在差异，对嵌入的 Flash 视频（如 YouTube 和 Vimeo）进行圆角处理非常具有挑战性。

如果您的所有最终用户都在运行支持 HTML5 的浏览器，那么只需将 player=html5 添加到 iframe 地址，如下所示：http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&player=html5。这将强制他们的浏览器加载视频的 HTML5 版本，border-radius 可以正常工作。

---

如果您的某些最终用户的浏览器不支持 HTML5，那么事情就会开始变得糟糕。

您的下一个最优雅的解决方案将类似于 Ivijan-Stefan 建议的那样，即分别寻址每个浏览器并在每个元素上添加 !important 标签，可能通过将 wmode=transparent 添加到 iframe 地址来补充像这样：http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent。

这将为您购买一些额外的浏览器版本的兼容性，因此您可能可以在此时将其称为退出。

---

但是，对于我们这些需要支持各种旧版浏览器（Internet Explorer 6，有人知道吗？）的人来说，唯一始终可靠的方法是制作一个看起来像一个弯曲的角落，并使用此图像的副本来覆盖视频的每个角落。 （这也需要我上面描述的wmode=transparent 技巧，因为一些最严重的违规者会在视频下方显示角落图像！）

以下是将此技术应用于 iframe 嵌入的 YouTube 视频的示例：http://jsfiddle.net/skywalkar/uyfR6/（示例半径 = 20px）

注意：如果你让角落覆盖太大（大于~20px），那么它们会覆盖播放器控件！ 为了尽量减少此问题的影响，您可以尝试通过将图像旋转 45 度来切角。这需要一组不同的叠加层和一些创造性地使用边距，但如果您需要更大的圆角半径，这可能是值得的：http://jsfiddle.net/skywalkar/BPnLh/（示例半径 = 30px）

【参考方案8】：

在 youtube 视频或其他任何内容（如 iframe 或 img 标签）上获得圆角的示例。

<div style="
width: 560px;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); /*ios 7 border-radius-bug */
-webkit-transform: rotate(0.000001deg); /*mac os 10.6 safari 5 border-radius-bug */
-webkit-border-radius: 10px; 
-moz-border-radius: 10px;
border-radius: 10px; 
overflow: hidden; 
">
<iframe   src="http://www.youtube.com/embed/ZM0e1m9T9HQ" frameborder="0">
</iframe>
</div>

【参考方案9】：

对于这个具有挑战性的问题，这是一个简单但非常实用且有用的“黑客解决方案”。

只需将您的 iframe 嵌入到这样的“div”元素中：

  <div>
   <iframe allowfullscreen="" frameborder="0"  player="html5"scrolling="no" src="https://www.youtube.com/embed/DCTwJJhQFy8"   ></iframe>
  </div>

然后将以下 css 添加到您的 HTML：

 div 
   position: relative;
   display:inline-block;
   margin:200px;

div:before 
    content: '';
    position: absolute;
    z-index: 5000;
    display: block;
    top: -27px;
    left: -27px;
    right: -27px;
    bottom: -27px;
    background-color: transparent;
    pointer-events: none;
    border: 30px solid white;
    border-radius: 50px;
][1]

这是一个相当灵活的解决方案，尽管它使用了一些额外的边界半径层。此方法也与大多数（所有）现代浏览器兼容。希望它有用。

【参考方案10】：

使用 CSS3 非常简单。你们错过的只是z-index，它正在扮演坏警察。

看下面的代码，我将播放器包裹在一个 div 中，根据需要设置它的高度和宽度，将溢出设置为隐藏，并根据需要设置 z-index。边界半径非常棒！

.player 
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  height: 320px;
  width: 480px;

<div class="player">
<iframe   src="https://www.youtube.com/embed/aiegUzPX8Zc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>

【讨论】：

谢谢你——这是唯一对我有用的答案！关键是overflow: hidden。 z-index 在我的特殊情况下什么也没做。

作为替代方案，您也可以使用transform: scale(1) 强制它进入自己的层。

z-index: iOS safari 需要 1 ！这就是我来这里的原因，因为它在其他任何地方都有效。

【参考方案11】：

您需要将此代码添加到您的 css 中。

<style>
.div-round 
    overflow: hidden;
    position: relative;
    z-index: 10;
    -webkit-border-radius: 20px;
    border-radius: 20px;


.div-round::before 
    display: block;
    content: "";


.iframe-round 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    border: 0;
    -webkit-border-radius: 20px;
    border-radius: 20px;

</style>

而且，只需将这些类分别应用到您的 div 和 iframe 中。

<div class="div-round" style="width: 640px; height: 360px;">
    <iframe class="iframe-round" allow="autoplay; encrypted-media; fullscreen" src="https://www.youtube.com/embed/Xjs6fnpPWy4?modestbranding=1&autoplay=0"></iframe>
</div>

最终结果应该是这样显示的。