How is it possible to lay an iFrame that has a black background and is slightly transparent on top of a html page so it kinda darkens the page.
I have this so far and its not working.
<iframe id="fade" src="fade.html" frameborder="No" style="FILTER: chroma(color=#000000)" allowtransparency="true">
<p>Your browser does not support iframes.</p>
</iframe>
fade.html
<html>
<body style="background:transparent">
</html>
If you just want to place a translucent box over some elements, try positioning a div with the right z-index and opacity properties:
HTML
<p>I sit in the background and get covered up by a box.</p>
<div id="shade"></div>
CSS
#shade {
background-color: red;
opacity: 0.7;
position: absolute;
top: 0px;
left: 5px;
width: 50px;
height: 50px;
z-index: 5;
}
p {
position: absolute;
z-index: 1;
}
See an example on jsfiddle.
Related
How could we use CSS mix-blend-mode, if the background image/video is not the parent of the element which gets the mix-blend-mode?
For example
<div class="has-video-background">
<video></video>
</div>
<div class="caption-above-video">
<h1>This div should have a colored background with a mix-blend mode multiply</h1>
</div>
The div with the class .caption-above-video should have a colored background with a mix-blend-mode. But the effect not appears. When using mix-blend-modes somewhere, the element with the blend-mode is the direct child of the parent with the background image, but in this example this is not possible because of a full with and height background video. Also I cannot manipulate the DOM output, because its coming from a page builder.
How could we use CSS mix-blend-mode effects when the containers are siblings?
Mix-blend-mode does not work with siblings.
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#effect_of_different_mix-blend-mode_values
I actually can't see what the problem is.
If you overlay the video with another element (by giving that element position absolute and the same size as the video for example - but there are lots of ways of doing this) and they are siblings (i.e have the same parent) then the mix-blend-mode seems to work perfectly well.
.parent {
width: 80vmin;
position: relative;
}
video {
position: relative;
width: 100%;
}
.caption-above-video {
background: red;
mix-blend-mode: multiply;
position: absolute;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="parent">
<div class="has-video-background">
<video src="https://www.w3schools.com/HTML/movie.mp4" controls autoplay></video>
</div>
<div class="caption-above-video">
<h1>This div should have a colored background with a mix-blend mode multiply</h1>
</div>
The only thing I did 'extra' was to make the overlaying element have pointer events of none so that I could use the controls on the video. If you need pointer events on the overlay then you'll need to implement the video controls yourself e.g. with JS.
As far as I know, it comes down to which div is on top. So by using position: absolute; and a z-index for example, you add mix-blend-mode to the div that is "on top" of the other div.
I added a code snipped so you can see what I've done to accomplish this.
-I did add a container around the two divs for styling purposes for this example.
-Added an extra div in the .caption-above-video that has the background-color and mix-blend-mode. This is important if you don't want the h1 to be affected by the mix-blend-mode, because that affects all children too.
Also added an background-image to the .has-video-background so you can see the result better. This is for demonstration purposes only and as soon as you add the actual video, the result will be the same.
.container{
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 400px;
height: 300px;
}
.has-video-background{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url('https://cdn.pixabay.com/photo/2022/08/09/16/19/sea-7375377_960_720.jpg');
background-size: cover;
background-repeat: no-repeat;
background-color: lightblue;
}
.caption-above-video{
position: absolute;
width: 200px;
height: 150px;
}
h1{
position: relative;
z-index: 2;
color: white;
}
.background-div{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
mix-blend-mode: multiply;
background-color: green;
}
<div class="container">
<div class="has-video-background">
<video></video>
</div>
<div class="caption-above-video">
<h1>Caption</h1>
<div class="background-div"></div>
</div>
</div>
Hi I built a responsive theme to embed vimeo videos.
Here is my CSS:
.vimeo-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.vimeo-container iframe,
.vimeo-container object,
.vimeo-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
And here is my html:
<div class="vimeo-container">
<!-- video iframe goes here -->
</div>
It works well and is responsive. Now I want to keep this responsiveness but make this video look like a background, so I thought of adding an overlay with text on top of it. Something like what is done on this Site.
How to keep the responsiveness and add an overlay with text to make it similar to the mentioned site above?
For the overlay, you can add an absolutelty postionned DIV inside your container. I changed your CSS a bit to make it more fullscreen-like and more responsive by giving a Fixed position to the vimeo-container, because I saw that there was padding at the bottom and we could see the white background of the body.
JSFIDDLE EXAMPLE
HTML:
<div class="vimeo-container">
<div class="overlay">
<div class="text-container">
<h1>Hello World!</h1>
</div>
</div>
<iframe src="https://player.vimeo.com/video/34905657?color=0fb0d4&title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p>Cowboy's Cat from Animade on Vimeo.</p>
</div>
CSS:
.vimeo-container {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
max-width: 100%;
}
.vimeo-container .overlay{
position: absolute;
width: 100%;
height:100%;
background:#000;
opacity:0.5;
z-index:999;
}
.vimeo-container .overlay .text-container{
width:100%;
text-align:center;
}
.vimeo-container .overlay .text-container h1{
color:#FFF;
text-transform:uppercase;
}
.vimeo-container iframe,
.vimeo-container object,
.vimeo-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Since your video container already have position: relative, you can set position:absolute for you layer over video:
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
Here is a working fiddle exampple with your code: https://jsfiddle.net/Munja/d8w4o31k/
Also, you can take a look on this fiddle example with video playing in bg: https://jsfiddle.net/Munja/dpfzhw1v/ I used exactly this thing on one website I was working on some time ago.
I'm looking put put some text over google drive embedded player (using iframe)
CSS & HTML:
#over {
position: absolute;
top: 0px;
left: 0px;
background-color: #FF0000;
height: 30px;
}
<div>
<div id="over">This is Preview</div>
<iframe src="https://docs.google.com/file/d/0B5GSymfNadlIV1NJRFpITWJLNHc/preview" width="640" height="480"></iframe>
</div>
But the text is not overlaying the video player on my site. I'm working on wordpress mh-joylite theme. Please suggest me, point my mistakes.
Wrap your video iframe and floating text and make the parent position: relative, like so:
.video {
position: relative;
display: inline-block;
/* ie7 inline-block support */
*display: inline;
*zoom: 1;
}
#over {
position: absolute;
top: 0px;
left: 0px;
background-color: #ff0000;
}
<div class="video">
<div id="over">This is Preview</div>
<iframe src="https://docs.google.com/file/d/0B5GSymfNadlIV1NJRFpITWJLNHc/preview" width="640" height="480"></iframe>
</div>
I have a YouTube iframe with a div as a sibling.
I started from this and all works great. (the title is visible and the video is clickable).
The problems started when I had to add a css scale transform on the stripWrapper div:
example.
As you can see this caused my title to hidden behind the YouTube video. In order to fix this I added a position: absolute; on the wrapper div, which caused the title to be visible, but now the video is not clickable.
When I reduce the z-index of the stripWrapper the video is clickable but the title is not visible: example
Comments:
1. The 80% width is only because I want JSBin's "edit" button to be visible.
2. "stripWrapper" must be 100% height
Last test's code:
HTML
<div class="wrapper">
<div class="stripWrapper">
<div class="strip">I am a title</div>
</div>
<iframe width="80%" height="100%" class="myIframe" src="http://www.youtube.com/embed/JTMf40ORFE8?playsinline=1&controls=0" frameborder="0" allowfullscreen=""></iframe>
</div>
CSS
.stripWrapper{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
right:0;
bottom: 0;
z-index: 10;
-webkit-transform: scale(1.05);
}
.strip{
position: absolute;
top: 20px;
left: 10px;
width: 80%;
background-color: green;
z-index: 12;
text-align: center;
font-size: 18px;
color: white;
}
.myIframe{
position:absolute;
top:0;
left:0;
right:0;
bottom: 0;
width: 80%;
height: 100%;
border: 1px solid blue;
z-index: 11;
}
edit: All tests:
test1 (everything is working, no scale)
test2 (added scale - div is hidden)
test3 (added position absolute - video not clickable)
test4 (changed z-index - div hidden again)
Check it out just need to make sure you are scaling the iframe and make sure the container has position:relative;
http://jsbin.com/wiluyiwire
Not sure if this is might be a Chrome bug (FF and IE work fine) since I've tried various work-arounds, especially those I found here, but to no avail: Removing the image border in Chrome/IE9
Basically I'm overlaying an image on top of another, and I've noticed that with Chrome if I scale the page to any zoom-level other than 100%, a grey image border appears around the overlay. You can see it in action here: http://jsfiddle.net/6HLzx/
EDIT: I updated the JSFiddle to include a better example of what I'm trying to accomplish.
// css
#background { position: fixed; left: 0px; top: 0px; border: none; border-style: none; z-index: 0; }
#overlay { position: fixed; left: 0px; top: 0px; border: none; border-style: none; z-index: 1;}
// html
<body>
<div id="background">
<img border="0" src="http://gorch.com/webstuff/background.png">
</div>
<div id="overlay">
<img border="0" src="http://gorch.com/webstuff/overlay.png">
</div>
</body>
Any ideas? Thanks in advance!
-jojohack
The faint line you see is caused by the browser rendering the image with an anti-alias edge. This creates a single pixel line which is half the opacity. The question now is... How can I turn off anti-aliasing on images?
If you want background.png to be a background then apply it in the css.
As an example:
#background {
background: #333 url(https://place-hold.it/500x500);
width: 500px;
height: 500px;
}
#overlay {
background: rgba(255, 0, 0, 0.5)/*partially transparent color*/;
width: 100%;
height: 100%;
}
<div id="background">
<div id="overlay">
</div>
</div>