向 Wistia Embed 添加圆角

Question

我有 0 编码经验或知识，所以有人可以告诉我如何为桌面和移动设备上的所有浏览器嵌入我的网站上的视频添加圆角。

我正在使用 Wistia，下面是我从他们那里获得的嵌入代码：

<script src="https://fast.wistia.com/embed/medias/g4bhvsj2cc.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_g4bhvsj2cc seo=true videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/g4bhvsj2cc/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>

有人可以告诉我要添加什么以及在哪里添加吗？

我已经检查了这里的其他一些帖子，但似乎没有一个对我有用

Answer 1

您可以向

border-radius

元素添加

.wistia_responsive_padding

，但请注意，如果添加太多，视频底部的按钮将开始被切断。该示例有

10px

<script src="https://fast.wistia.com/embed/medias/g4bhvsj2cc.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;border-radius:10px;overflow: hidden;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_g4bhvsj2cc seo=true videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/g4bhvsj2cc/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>

Answer 2

尝试将此 CSS 放入您的应用程序中：

.wistia_embed > div {
  border-radius: 10px !important;
}