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...
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! z-index is crucial here, with only overflow hidden - frame was sometimes popping with corner - when frame content was changing.
CSS Syntaxborder-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.
We can use inline CSS for the iframe by using CSS inside the iframe tag. Example: The design of the HTML page is implemented as follows. to an iframe? Example: In the following example, the iframe size is of “300px” for both width and height and the border thickness is “3px” and dotted style.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With