Youtube Embedded Video as Iframe with Border-Radius

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.

Sample Image

Sample Image

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=transparentattribute 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



Leave a reply



Submit