4 rounded corners on YouTube video iframe
Set the .youTubeContainer
to inline-flex
to remove the small amount of white-space that is preventing the corners from properly sticking.
jsFiddle
youtube iframe border radius removed when video start
You can wrap it and hide the overflow.
Your issue with the video's iframe ignoring the wrapper/container's border-radius on play is from a couple factors, like z-index and positioning to name a couple.
Here's the CSS that I used to create it.
.bord-rad-yt-container{
margin:0 auto;
border:1px solid blue;
padding:0;
display:inline-block;
overflow:hidden;
border-radius:25%;
z-index:2;
position:relative;
}
I've also taken the liberty of providing an example that compares the two, side-by-side.
http://codepen.io/anon/pen/ZObPGX
youtube embeded video rounded corners when playing
JSFiddle link
Another technique using css transforms
and rotates
youtube embedded video as iframe with border-radius
iframe {
border:20px solid red; /*your border-color*/
border-radius: 20px !important;
}
The idea as you can see is in creating a "wrapper" around the iframe with the border.
To get a border smaller than this, you shall change 20px in both rules to same value.
CSS adding border radius to an IFrame
Border radius isn't well supported or consistent yet. If you want the desired affect, try using DIV's around the element and use graphics instead, with an overflow of hidden in your CSS. You might want to look into the sliding doors tehnique if your iframe varies in height.
http://www.alistapart.com/articles/slidingdoors/
Hope this helps.
Good luck!
How to round the borders of a video element?
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>
border-radius disables YouTube Embed on FF
I had the same problem. Use this iFrame code. The wmode=transparent
attribute is important!
<iframe width="464" height="261" frameborder="0" allowfullscreen=""
src="http://www.youtube-nocookie.com/embed/rZ2dIVB1vmk?wmode=transparent&autohide=1&egm=0&hd=1&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0&showsearch=0"></iframe>
How to position youtube embedded video under another section since it has covered the entire page banner after making it responsive?
Your code is a mess to be honest. You have multiple div
without closing tag,p
without closing tags,
also some = are missing while declaring classes in your html code.
First go through your code, make sure that every single tag has a closing tag, after that continue with your video because if you dont fix these things, then your responsivity will be broken because of those unclosed tags.
Have a look into that, i have fixed the video so now it is under your featured section, you just have to play around with it to make it responsive after you closed every unclosed tag.
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class="vid-container">
<iframe class="vid-container-iframe"
src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560"
height="315" frameborder="0"></iframe>
</div>
</div>
</section>
Related Topics
Stop Link's :Before Content from Being Underlined by Rule Applied to the Link
Centering a Single Column Using Bootstrap 4 Grid System
Which Border Radius Property Will Work in IE9
Angular 6 Material - Hues and How to Change the Color of Mat Radio Button
Css3 Grid Layouts: New Row After Specific Element - Possible
Transform Scale Property Not Working in Chrome & Safari
CSS Modules - Exclude Class from Being Transformed
Twitter Bootstrap Modal Opening/Closing Causes Fixed Header to Jump
Give Space Above and Below a Div
CSS - <Li> Items in Horizontal Menu Have a Gap Between Them
How to Check If a Browser Supports Shadow Dom
Checkboxes with Font Awesome 5 Icons
How Come My Float Elements Aren't Within Their Parent
How to Remove The Arrows from Input[Type="Number"] in Opera
When 1 Px Border Is Added to Div, Div Size Increases, Don't Want to Do That
How to Stretch The Background Image to Fill a Div
Do We Need Type="Text/CSS" for <Link> in HTML5
How to Push a Footer to The Bottom of Page When Content Is Short or Missing