Issue
I have a youtube video embedded
into a Qt widget, is it possible to display it with rounded borders?
The red border in the picture below is just to illustrate what I'm trying to mean, how could I round the borders of the video
instead of the borders around it?
document.getElementById('player').style.border = "12px solid red";
document.getElementById('player').style.borderRadius = "12px";
While searching i found an example using iframe, I'm trying to get the video looking like it.
Solution
Short answer
You can't customize an embedded video style directly, unless the provider, provides some relative options for the style.
But you can do some modifications with extra layers and CSS
In order to make the youtube video border rounded, you need to create a parent division for it with the overflow: hidden;
property and custom border-radius
, then to make it looks like a rounded element you need to change its position and put it in the top left or the right place to allow it fit the available box. To set it to the right place on the screen you have to specify the width
and height
of the iframe
element respectively to fit it in your situation.
It should be something like this:
.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>
Do it with JS only
As the OP requested I implement the answer in JS only to let them do workarounds in Qt
widgets. It's simply done with JS built-in functions like: document.createElement
, Element.setAttribute
, HTMLElement.style
, and Node.appendChild
, which you can read more about how they function in their respective pages. This approach can be directly implemented in the browser dev tools console overview section.
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
Answered By - SMAKSS
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.