如何给视频元素添加圆角边框？

Question

我在一个Qt小部件中嵌入了一个Youtube视频，有可能将其显示为圆角边框吗？

下面图片中的红色边框只是为了说明我的意思，我该如何使视频的边框变成圆角而不是周围的边框？

document.getElementById('player').style.border = "12px solid red";
document.getElementById('player').style.borderRadius = "12px";

在搜索过程中，我找到了一个使用 iframe 的示例，我正在尝试使视频看起来像它。

- Katia

---

这个回答解决了你的问题吗？如何嵌入YouTube视频？ - Parisa.H.R

Answer 1

简短回答

您不能直接自定义嵌入视频的样式，除非提供者提供了一些相关的样式选项。

但您可以通过额外的层和CSS进行一些修改

为了使Youtube视频边框变成圆角，您需要为其创建一个父级容器，并使用overflow: hidden;属性和自定义的border-radius，然后将其位置更改为顶部左侧或右侧的位置，以使其适合可用的框。要将其设置为屏幕上的正确位置，您必须分别指定iframe元素的width和height以适应您的情况。

应该是这样的：

.container {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.video {
  border-radius: 2rem;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0);
}

<div class="container">
  <div class="video">
    <iframe width="560" height="310" src="https://www.youtube.com/embed/tTw2-aHcUEA" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

仅使用JS实现

根据OP的要求，我仅使用JS来实现答案，以便让他们在Qt小部件中进行解决方案。这可以通过JS内置函数轻松完成，例如：document.createElement、Element.setAttribute、HTMLElement.style和Node.appendChild等。您可以在它们各自的页面中阅读更多有关它们如何运作的信息。这种方法可以直接在浏览器开发工具控制台概述部分中实现。

const iframe = document.createElement('iframe');
iframe.setAttribute("src", "https://www.youtube.com/embed/tTw2-aHcUEA")
iframe.setAttribute("width", "560");
iframe.setAttribute("height", "310");
iframe.setAttribute("frameborder", "0");

const video = document.createElement("div");
video.style.borderRadius = "2rem";
video.style.overflow = "hidden";
video.style.position = "absolute";
video.style.top = "0";
video.style.left = "0";
video.style.transform = "translateZ(0)";

video.appendChild(iframe);

const body = document.body;
body.appendChild(video);

CodePen: https://codepen.io/SMAKSS/pen/bGKbjaE

- SMAKSS

---

你是否能够通过Chrome Dev Tools控制台“复制”你的答案？我的意思是，启动浏览器中嵌入的视频，在按下F12键后，使用控制台对视频进行边框处理。我问这个问题是因为你回答的方式让我不知道如何将其适应于Qt小部件。如果所有代码都在控制台中执行，我可以轻松地将其复制到Qt小部件中。 - Katia