What a strange thing i've just discovered...
if i've got inset box-shadow or border-radius on any outter div (even many levels higher) then player generates about 40% CPU usage. Even if shadow isn't over/under this player.
How to fix it? Without shadow and border-radius it's about 18% CPU
I've got on my site structure like this:
<div>
<div>
<div>
<iframe src="http://player.vimeo.com/video/15273408" width="700"
height="400" frameborder="0"
webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
</div>
And my CSS looks like this:
box-shadow: inset 5px 7px 10px -5px black; border-radius: 3px;
I confirmed this behavior in both Firefox and Chrome; using a PNG background property doesn't exhibit this problem.
Related
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
I have a web design that works with additive color mixing.
The desired effect is: red square overlays green square, the overlapping area appears yellow.
Are there any good ways to achieve additive color mixing with standard tools (CSS, CSS transparency/opacity, transparent png images)?
The way we want to apply it in the design: two patterns (e.g. transparent png images) overlay each other - the areas where the two patterns overlay are brighter.
METHOD 1:
The desired effect can be achieved using CSS mix-blend-mode nowadays. Chrome support only for now.
Visit chrome://flags/ and "Enable experimental Web Platform features" to see effect.
http://jsfiddle.net/9AgDm/4/
<div style="width: 200px; height: 200px; background-color: #F00; position: absolute; top: 100px; left: 100px;"></div>
<div style="width: 200px; height: 200px; background-color: #0F0; position: absolute; top: 0; left: 0;"></div>
<div style="width: 200px; height: 200px; background-color: #F00; position: absolute; top: 100px; left: 100px; mix-blend-mode: screen;"></div>
METHOD 2:
The effect can also be achieved using background-blend-mode with multiple background gradients on a single HTML element.
Check here for browser support:
http://caniuse.com/css-backgroundblendmode
http://jsfiddle.net/9AgDm/5/
<div></div>
CSS:
div {
background-blend-mode: screen;
background:
linear-gradient(to right, #0F0, #0F0),
linear-gradient(to right, #F00, #F00);
background-position:
0 0,
100px 100px;
background-repeat: no-repeat;
background-size:
200px 200px,
200px 200px;
height: 300px;
width: 300px;
}
METHOD 3:
Same effect using SVG. Works on most browsers.
Tested on:
FF 7+; Chrome 16+; IE 10+; Opera 12+; Safari 5, 6+ (failed on 5.1)
http://jsfiddle.net/9AgDm/9/
<svg width="300" height="300">
<defs>
<filter id="additive">
<feFlood x="0" y="0" width="200" height="200" flood-color="#0F0" result="a"/>
<feFlood x="100" y="100" width="200" height="200" flood-color="#F00" result="b"/>
<feBlend in="a" in2="b" result="ab" mode="screen"/>
</filter>
</defs>
<rect filter="url(#additive)" width="100%" height="100%"/>
</svg>
METHOD 4:
With the exception if IE8 and below, canvas will work on most browsers. Here are a few examples/libraries that could achieve the additive colors:
http://media.chikuyonok.ru/canvas-blending/
http://www.pixastic.com/lib/docs/actions/blend/
http://canvasquery.com/#blending
As I saw the answer of TheNoble-Coder, I remembered the old ways of my first experiments with transparency. You can achieve an optical illusion similar to what you want with colored GIFs, PNGs or even any other raster graphics format.
The trick is to paint only every second pixel in the base color, so that a raster appears with colored and transparent pixels alternating. If you place two such images with different base colors above each other, the additive color mixing will result in the eye of the viewer and the final color looks like an additive color mix.
Back to your question: you can create such simple graphics effects using a canvas or a probably also through combination of CSS gradients.
Overlapping images can somehow produce Color Mixing Effect
In the code bellow, absolute positioning has been used to overlap the top image the bottom images and opacity of the top image has been set to 70% to make it transparent.
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Color_icon_red.svg/220px-Color_icon_red.svg.png" style="width:200px; height:200px; float:left; background-color:#F00; position:absolute; top:100px; left:100px; opacity:0.7;filter:alpha(opacity=70); z-index:2" />
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Color_icon_green.svg/220px-Color_icon_green.svg.png" style="width:200px; height:200px; float:left; background-color:#030; clear:left" />
</div>
<!--This Code has been checked in Firefox 16, Chrome8 and IE8(with Activex enabled) -->
View Demo for the above code Here:- http://jsfiddle.net/YtAHN/embedded/result/
Colored divs when overlapped can't produce that effect however we can make it look like that effect using CSS and a Simple CSS Trick:
If you use css and some tricks you can achieve an affect which will look like two squares overlapped and overlapping region yellow. The Simple trick is that you have to add multiple div's to make the green and red squares and use float, clear and opacity to produce transparency effect. Check this simple code Which will produce this affect:
<div>
<div style="width:200px; height:100px; float:left; background-color:#F00; opacity:0.7;
filter:alpha(opacity=70);"> <!-- filter:alpha(opacity=xx) Used For IE8 and earlier Compatibility -->
Red Div
</div>
<div style="width:100px; height:100px; float:left; background-color:#F00; clear:left; opacity:0.7;
filter:alpha(opacity=70);">
Red Div
</div>
<div style="width:100px; height:100px; float:left; background-color:#FF0; opacity:0.5;
filter:alpha(opacity=50);">
Overlapping Region
</div>
<div style="width:100px; height:100px; float:left; background-color:#030; opacity:0.7;
filter:alpha(opacity=70);">
Green Div
</div>
<div style="width:100px; height:100px; float:left; clear:left; opacity:0.7;
filter:alpha(opacity=70);">
Blank Div
</div>
<div style="width:200px; height:100px; float:left; background-color:#030; opacity:0.7;
filter:alpha(opacity=70);">
Green Div
</div>
</div>
<!--This Code has been checked in Firefox 16, Chrome8 and IE8(with Activex enabled) -->
View Demo for the above code Here:- http://jsfiddle.net/JqY3r/embedded/result/
Simple overlapping and tranparency on div's WILL NOT produce this color mixing effect as obvoious from the following code:
If you simply use overlapping and transparency it will not work. You have to use a trick like above code to produce such effect(except for images, as images can be used to produce this colour mixing affect as in the first example). As you will see that the following code CAN NOT produce the desired effect as above
<div style="width:200px; height:200px; float:left; background-color:#F00; position:absolute; top:100px; left:100px; opacity:0.7;
filter:alpha(opacity=70); z-index:2"> <!-- filter:alpha(opacity=xx) Used For IE8 and earlier Compatibility -->
</div>
<div style="width:200px; height:200px; float:left; background-color:#030; opacity:0.7;
filter:alpha(opacity=70); clear:left">
</div>
<!--This Code has been checked in Firefox 16, Chrome8 and IE8(with Activex enabled) -->
View Demo for the above code Here:- http://jsfiddle.net/9AgDm/embedded/result/
Hope this helps.
http://maniamicizia.it/index.php?page=home&lang=it
I have based my website on float:left and that is working nice (IE isn't just because of the rgba background and adapted background). I'm now having this strange issue that prevent the text from standing in its own div.
Here is the CSS/HTML
<div style='
border:10px solid rgb(239,226,173);
background:rgba(200,200,200,0.7);
margin-left:320px;
margin-top:290px;
width:150px;
height:200px;
box-shadow: 0px 0px 6px 3px rgba(100, 100, 100, 1);
-webkit-transform:rotate(0deg);
'> Hello World </div>
Just...why? I know how to handle the position, but why is the text going out like that?
The div is "obviously" the one on the right of the post-it.
I tried it myself, but the text is not overflowing at all, it stays inside the div. Probably you are inheriting an style attribute from a parent div.
Use float:left; in your element style to keep the text inside its desired box.
<div style="
border:10px solid rgb(239,226,173);
background:rgba(200,200,200,0.7);
margin-left:320px;
margin-top:220px;
width:150px;
height:200px;
box-shadow: 0px 0px 6px 3px rgba(100, 100, 100, 1);
-webkit-transform:rotate(0deg);
float:left;">
Wth am I doing here?
</div>
I'm working on a little project for fun and ran into some trouble trying to get an image inside a <div> to float on the right side of said <div>. The problem is that it seems to ignore the container (the <div> it's in) and act as if it were part of the parent wrapper. What I want to happen is for the containing element to adjust it's height based on the image inside of it...I guess. Been toying with it but haven't had any luck.
HTML:
<div class="maincontentwrapper">
<!--First body article on page-->
<div class="contentpane">
<img src="images/welcomethumb_small.jpg" alt="" id="infoimg" />
Filler text. This is the only thing that<br />
seems to change the height of this div's<br />
border.
</div>
<!--Second body article on page-->
<div class="contentpane">
Text goes here.
</div>
</div>
CSS Code for all visible classes:
.maincontentwrapper {margin: 10px 333px 10px 10px;}
.contentpane {border: solid 2px red;
margin-bottom: 10px;
padding: 4px 4px 4px 4px;
text-indent: 1em;}
/* Thumbnail for first article on home page.
Margins set to push image to align ignoring the container's
border width and padding width. */
#infoimg {float: right;
width: 145px;
height: 150px;
margin: -6px -6px 4px 4px;}
/* End Main Content Styles */
EDIT: If you need a link to the website for clarification as to what the issue is I can certainly add it.
What I want to happen is for the containing element to adjust it's height based on the image inside of it
You need to clear below the image, like this: http://jsbin.com/iduvof/1/edit
There are several ways to do this, which you can read more about here.
The method that I have used is to add an extra div which has the property clear: both. This is probably not best practice as it's non-semantic markup, but it's easy!
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;