CSS adding border radius to an IFrame

user_7382 0
Viewed 60776

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;

The problem is that when you load content to that IFrame, the content overlaps the borders in the corners, like so:

IFrame content overlapping with CSS border

Any ideas how one might get past this issue? E.g. is there a JavaScript library that would take care of this...

iframe border css
11 Answers

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)

user_3441170

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

Like so:

<html>

<body>
  <div style="border-radius:10px;overflow: hidden;width: fit-content;display: flex;height: fit-content;">
    <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>

user_132101990

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>
user_103555150
Related