我在 Qt 小部件中有一個 youtube 視頻embedded，是否可以用圓角邊框顯示它？
下圖中的紅色邊框只是為了說明我的意思，我怎么能video圍繞它的邊框而不是它周圍的邊框？
document.getElementById('player').style.border = "12px solid red";
document.getElementById('player').style.borderRadius = "12px";
在搜索時，我找到了一個使用iframe的示例，我試圖讓視頻看起來像它。
uj5u.com熱心網友回復：
簡短的回答
您不能直接自定義嵌入的視頻樣式，除非提供商提供了一些樣式的相關選項。
但是您可以使用額外的圖層和 CSS 進行一些修改
為了使 youtube 視頻邊框圓潤，您需要使用overflow: hidden;property 和 custom為其創建一個父磁區border-radius，然后使其看起來像一個圓角元素，您需要更改其位置并將其放在左上角或右上角放置以使其適合可用的盒子。要將其設定到螢屏上的正確位置，您必須分別指定元素的width和height以iframe適應您的情況。
它應該是這樣的：
顯示代碼片段
.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.styleNode.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);代碼筆： https ://codepen.io/SMAKSS/pen/bGKbjaE
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/520137.html
上一篇：我使用在qml按鈕中遇到問題
下一篇：從QComboBox項中洗掉邊框