CSS adding border radius to an IFrame

Question

Adding a border to an IFrame is no biggie - you do it like this e.g.:

  border: 4px solid #000;
  -moz-border-radius: 15px;
  border-radius: 15px;


        

Answer 1

You can also do it like this:

<div style="padding:10px;background:#000;webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;width:560px;margin:0 auto;overflow:hidden;">
    <iframe src="http://www.youtube.com/embed/MOVIEID?fs=1&autoplay=1&loop=1&rel=0&border=0&modestbranding=1" width="560" height="315" frameborder="0"></iframe>
</div>

I have also included all the youtube options in the above example:

1: autoplay=1 (0/1 | automatic play movie)

2: loop=1 ( 0/1 looping on/off )

3: rel=0 ( hide related movies after movie ending, this does not always work)

4: border=0 (removes youtube border)

5: modestbranding=1 (removes youtube logo)

Answer 2

Working solution: (2019) this allows you to apply any additional css you want, keep the iframe dynamic, and still interact with the iframe.

add this javascript (or jquery) function to your page:

pure javascript solution:

function setIframeBorder(){
    let iframeBorder = document.getElementsByTagName('iframe-border');
    for(let i = 0; i < iframeBorder.length; i++){
        let iframe = iframeBorder[i].getElementsByTagName('iframe')[0];
        let width = iframeBorder[i].getAttribute('width'); let height = iframeBorder[i].getAttribute('height');
        if(width){iframeBorder[i].style['width'] = width;} if(height){iframeBorder[i].style['height'] = height;}
        iframe.style['width'] = '100%'; iframe.style['height'] = '100%';
        iframeBorder[i].style['overflow'] = 'hidden'; iframeBorder[i].style['display'] = 'inline-block';
        iframe.style['position'] = 'relative'; iframe.style['margin'] = '0';
    }
}
setInterval(setIframeBorder, 10);

jquery solution:

function setIframeBorderJquery(){
    $('iframe-border').each(function(){
        $(this).css({'overflow': 'hidden', 'display': 'inline-block', 'width': $(this).attr('width'), 'height': $(this).attr('height')});
        $('iframe', this).css({'position': 'relative', 'margin': '0', 'width': '100%', 'height': '100%'});
    });
}
setInterval(setIframeBorderJquery, 10);

css: (optional)

iframe-border{
    border-radius: 20px;
}

usage:

<iframe-border width="560" height="315">
    <iframe src="https://www.youtube-nocookie.com/embed/ESjRtD0VoRk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</iframe-border>

Answer 3

Use this property:

border: 4px solid #000;
-moz-border-radius: 15px;
border-radius: 15px;
overflow: hidden;

Answer 4

Put the iframe in a wrapper element and give the wrapping element this CSS property:

transform: translateY(0px);

.corner-wrapper {
  display: block;
  overflow: hidden;
  width: 300px;
  height: 150px;
  border-radius: 10px;
  transform: translateZ(0px);
  border: 3px solid #eee;
}

<div class="corner-wrapper">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d77935.71780117304!2d9.691260439866745!3d52.37964560033004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b00b514d494f85%3A0x425ac6d94ac4720!2sHannover!5e0!3m2!1sde!2sde!4v1458445807305" width="300" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Answer 5

I know this is a rather old thread, but I found a valid work around for it that the others didn't cover.

What you're seeing is a z-indexing issue. All you need to do is put your iFrame into a DIV, and set the DIV's and iframe's position to absolute. Then set your z-index in CSS. It works great with Youtube videos in bubbles!

<style>

#player-wrapper{
    border-radius:50%;  
    border:solid 1px #999;
    width:360px;
    height:360px;
    overflow:hidden;
    position:absolute;
    left:50%;
    top:90px;
    margin-left:-130px;
    z-index:10;
}
#player-wrapper iframe{
    position:absolute;
    left:50%;
    margin-left:-320px; 
    z-index:9;
}
</style>

<div id="player-wrapper">
    <iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/rTMMraosnzg></iframe>
</div>

Answer 6

Adding css property overflow: hidden; to parent element of iframe work fine!

Like so:

<html>

<body>
  <div style="border-radius:10px;overflow: hidden;">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div/>
</body>

</html>