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;
Related
Parent div is absolute, child div contains iframe. I want iframe to expand. I have managed to achieve this by setting child to fixed position.
However, what is causing a problem is that I have some transform translate on parent div and this causes iframe to loose width again. I cannot modify or remove this translate which is complicated (like transform: translate(836.152px, 253.619px) translateZ(9999px) rotate(0deg))
Demo here:
http://jsfiddle.net/5bk6dn7y/1/
Everything works well if you remove translate, but again I cannot modify or remove this.
One fix it to add:
iframe {
width: 1000%;
}
but this is not a solution because on small screen, it will not automatically shrink to max screen width.
Full code, use jsfiddle instead because this snippet wont play youtube in iframe.
#a {
position: absolute;
background: red;
top: 50px;
transform:translateX(10px);
}
#b {
position: fixed;
width: 100%;
background: blue;
max-width: 400px;
}
iframe {
width: 100%;
height: 200px;
}
<div id="a">
<div id="b">
<iframe src="https://www.youtube.com/embed/Yx7mIu2qspw?autoplay=1" loading="lazy" allow="accelerometer; autoplay; encrypted-media; gyroscope;" allowfullscreen=""></iframe>
</div>
</div>
This question already has answers here:
Why does a vertical scrollbar appears in the parent of the iframe?
(2 answers)
Closed 3 years ago.
I'd like to make the 4 corners of a YouTube video iframe rounded.
<div class="youTubeContainer">
<iframe width="500" height="300" src="https://www.youtube.com/embed/QzDeMXSgGl0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
.youTubeContainer {
width: 100%;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
-webkit-transform: rotate(0.000001deg);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
overflow: hidden;
}
.youTubeContainer .video {
width: 100%;
height: 410px;
}
The problem with the code above is that only some corners become rounded. What do I need to fix to make all 4 corners rounded no matter the height.
Heres the fiddle: https://jsfiddle.net/gb4aLxks/
Set the .youTubeContainer to inline-flex to remove the small amount of white-space that is preventing the corners from properly sticking.
jsFiddle
Here is the code for iframe video:
<div>
<iframe src="https://player.vimeo.com/video/135943631?autoplay=0&color=c9ff23&
title=0&byline=0&portrait=0" width="1000" height="1000" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
Now it shows like this.
May i know how to avoid this black bar below and above the video.
I tried using following code:
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 20px;
height: 0;
background-color:#fff;
}
html:
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/135943631?autoplay=0&
color=c9ff23&title=0&byline=0&portrait=0" width="800px" height="450px"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
Note: I should not change height. Because i need big size video.
Can Any one suggest me, how can i achieve this?
The black bars are appearing because your video is in aspect ratio of 16:9 and you are trying to fit with inside iframe of 1000px/1000px.
So your height is scaled according to aspect ratio, i.e., video height is 1000 * 9/16 = ~584px and remaining 420px are empty. Since vimeo has the video background as black color, this empty space is appearing as black bars.
To fix your problem, its better to have iframe with width/height in 16:9 ratio. (example: width: 800px; height: 450px)
Basically exactly as I asked. I'd like the following to work:
<canvas width="100" height="100" style="position: relative">
<div style="border: 1px solid black; width: 50px; height: 50px; position: absolute; left: 10px; top: 10px"></div>
</canvas>
I realize that the contents of the canvas tag are usually only displayed as fallback, but I'd like to display the contents always.
Is there a way to force this?
No, not in a way that works portably.
However, you can position the div on the coordinates of the canvas quite easily with a bit of javascript.
I've embedded three YouTube videos onto a page, but I've wrapped them with a DIV and a CLASS called "videoplayer", but the DIV and the CLASS seem to be ignored because they don't display in the page.
You can see it here: http://72.4.166.89/en/tutorial.asp
Here's the CSS being used:
.videoplayer {
border: 1px solid #1D740C;
height: 384px;
width: 480px;
padding: 0px;
margin-left: 25px;
margin-bottom: 25px;
}
I've looked with most of my tools and I don't see the DIV or the CLASS having been used at all, but they are there.
Has anyone else run into this, or is this not allowed?
Instead of creating the div to surround the player and adding a class to the div, why not just use the built in class of the player youtube-player to apply your styling:
.youtube-player{
border: 1px solid #1D740C;
height: 390px;
width: 480px;
padding: 0px;
margin-left: 25px;
margin-bottom: 25px;
}
Working example on jsfiddle: http://jsfiddle.net/Damien_at_SF/guSAC/1/
This by-passes the need to have a parent div and also the problem that you have above :)
hope that helps :)
The div with class "videoplayer" is on your page but will not do anything extraordinary if you do not apply any css style information. If you want to see the div, add a background color or border etc. eg.
div.videoplayer {
background:black;
border:2px solid red;
padding:10px;
}
...or something to that effect.
You're div is there, you just can't see it in the browser without some help. What tools did you use? Try firebug, it took me literally 3 seconds to find it with the search feature.
or is this not allowed?
Its most definitely allowed. Having an object tag inside a div is perfectly fine.
I have found out you are missing closing tab for (at least) one of your divs
<div class="videoplayer">
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/icAFUlsysqg?rel=0" frameborder="0"></iframe>
<!-- you see, there is no closing </div> tag, so put it here -->
<div class="videoplayer">
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/WC0E9jHw1B8?rel=0" frameborder="0"></iframe>
</div>
<div class="videoplayer">
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/ayJbo1-ReBc?rel=0" frameborder="0"></iframe>
</div>
And also, you should define some CSS for this class :)