CSS adding border radius to an IFrame
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:
Any ideas how one might get past this issue? E.g. is there a JavaScript library that would take care of this...
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>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)
Use this property:
border: 4px solid #000;
-moz-border-radius: 15px;
border-radius: 15px;
overflow: hidden;
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!
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>
You could use the Malsap jQuery rouned corner plugin. It won't fix the actual problem, but it will give you the rounded corners without the issue.
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>The box-shadow will round corners. Just have a spread-distance of the thickness of your border and a blur value of 0. This is a hack, but what isn't in HTML?
box-shadow: 0 0 0 1px #000;
Will add a 1 pixel border. The first two zeros are the offset. The third zero is how much blur you want to give to the shadow (none). The 1px is how far "out" you want the shadow to go. The last parameter is the color of the border. Most people omit the spread because they want their shadows to be the same size as the element.
Here is an example where I did this, which works in at least IE9 and Chrome 17: http://www.philihp.com/blog/2012/i-made-a-gps-locator-for-myself/
In case you haven't figured this out yet, try this...works for me:
I have noticed that if you try to do this externall even to the tag, it doesn't work. Set style within the iframe tag.
Good Luck!
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>
You miss overflow and position properties. This should work:
border: 4px solid #000;
-moz-border-radius: 15px;
border-radius: 15px;
overflow: hidden;
position: relative;
加载中,请稍侯......
精彩评论