How can I overlay a div with semi-transparent opacity over a youtube iframe embedded video?
<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>
CSS
#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.8;
/*background:rgba(255,255,255,0.8); or just this*/
z-index:50;
color:#fff;
}
edit (added more clarification):
HTML5 is approaching us, with more and more devices that use it instead of flash, which complicates the embedding of youtube videos, thankfully youtube provides a special embeddable iFrame with handles all of the video embedding compatibility issues, but now the previously working method of overlaying a video object with a semi-transparent div is no longer valid, I am now unable to add a <param name="wmode" value="transparent"> to the object, because it is now a iFrame, so how do I add a opaque div on top of the iframe embedded video?
Information from the Official Adobe site about this issue
The issue is when you embed a youtube link:
https://www.youtube.com/embed/kRvL6K8SEgY
in an iFrame, the default wmode is windowed which essentially gives it a z-index greater then everything else and it will overlay over anything.
Try appending this GET parameter to your URL:
wmode=opaque
like so:
https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque
Make sure its the first parameter in the URL. Other parameters must go after
In the iframe tag:
Example:
<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>
Note that the wmode=transparent fix only works if it's first so
http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0
Not
http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent
Hmm... what's different this time? http://jsfiddle.net/fdsaP/2/
Renders in Chrome fine. Do you need it cross-browser? It really helps being specific.
EDIT: Youtube renders the object and embed with no explicit wmode set, meaning it defaults to "window" which means it overlays everything. You need to either:
a) Host the page that contains the object/embed code yourself and add wmode="transparent" param element to object and attribute to embed if you choose to serve both elements
b) Find a way for youtube to specify those.
I spent a day messing with CSS before I found anataliocs tip. Add wmode=transparent as a parameter to the YouTube URL:
<iframe title=<your frame title goes here>
src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"
scrolling="no"
frameborder="0"
width="640"
height="390"
style="border:none;">
</iframe>
This allows the iframe to inherit the z-index of its container so your opaque <div> would be in front of the iframe.
Is the opaque overlay for aesthetic purposes?
If so, you can use:
#overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 50;
background: #000;
pointer-events: none;
opacity: 0.8;
color: #fff;
}
'pointer-events: none' will change the overlay behavior so that it can be physically opaque. Of course, this will only work in good browsers.
Related
I added a basic iframe to my website, and it is showing scrollbars (vertical and horizontal) that I can't get rid of in any way. I've been reading a lot about it on the Net, and nothing seem to work (like overflow: hidden, or scrolling="no"). What is the best and most standard way of fixing this, as of now / 2016?
Thanks!
Use the following CSS:
iframe::-webkit-scrollbar {
display: none;
}
i would say <iframe scrolling="no" src="..." >CSS
iframe { overflow:hidden; }
<body>
<div class="ifrm">
<iframe src="http://tholman.com/elevator.js/" height="300" width="300" scrolling="no"</iframe>
</div>
</body>
The <iframe> scrolling attribute is not supported in HTML5. Use CSS instead. The scrolling attribute specifies whether or not to display scrollbars in an <iframe>. Normally, scrollbars appear in an <iframe> when the content is larger than the <iframe>.
iframe {
overflow: hidden;
}
How do I hide an iframe, but still load it? Etc. For playing a youtube song.
<iframe src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1" style="display: none;"></iframe>
This will hide the iframe, however it dosen't seems to load the iframe. (Song is not playing.)
Thanks
Use can use width: 0; height: 0; position: absolute; and border: 0;
So the updated code will be!
<iframe src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1" style="position: absolute;width:0;height:0;border:0;"></iframe>
Added:
style="position: absolute; width:0; height:0; border:0;"
It will hide it, make media to play in the background and it will also collapse it space!
Updated Fiddle
http://jsfiddle.net/ygkvbphs/
I was still having trouble with the iframe taking up space until I added absolute positioning. Then it stopped taking up space all together.
<iframe src="/auth/sso/" style="width: 0; height: 0; border: 0; border: none; position: absolute;"></iframe>
Set the visibility to hidden. However the space it took up won't collapse.
<iframe src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1" style="visibility: hidden;"></iframe>
The existing answers using CSS didn't work for me. Even with display:none I ended up with a 4x4 dot where the iframe was. What I had to do was the following:
<iframe width="0" height="0" frameborder="0" src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1"></iframe>
Simply set a style of "display: none;".
<iframe src="your url" style="display: none;"></iframe>
By combining both answers, I use height:0; and visibility:0, as this works to hide any borders or box shadows as well.
You can use CSS to position the iframe off the page and out of the way. This won't leave a dot or any trace of the frame.
<iframe style="position: absolute; left: -900000px" src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1"></iframe>
Remove the src from iframe then add it back in - forced iframe to load:
/**
* Issue: iframe doesn't show because it's in a div that is display:none on load
*
* Solution: When the button is clicked to show the hidden div:
* in the iframe, copy the url from the src attribute
* then set the src attribute to ""
* then set the src attribute back to its original value.
* This forces the iframe to load.
*/
$('#show-div-button').click(function() {
var iframe = $('iframe');
var iframe_src = iframe.attr('src');
iframe.attr('src', '');
iframe.attr('src', iframe_src);
});
I am having problems with an embedded youtube video.
I want that a fixed div goes over the embbedded youtube video. I know and read about the issue, and added ?wmode=opaque at the end of the source, and still not worked. Also i tried a bunch of other variants ?wmode=transparent &wmode=transparent
Here is the iframe code:
<iframe width="500" height="315" src="http://www.youtube.com/embed
/8ZU08c5tFHc?wmode=opaque" frameborder="0" allowfullscreen></iframe>
Here is div css code:
#footer{
margin:0 auto;
width:950px;
height:335px;
position:fixed;
bottom:0;
}
Also i am having another problem, don't know if it`s related, it's very strange.
If I go on youtube and try to embed another video in the place of the old one. It will not change the video, will change the width with the new one but the video is the same, with the new width from the other video i try to embed. If i embed with the old youtube code it will show the new video.
Please help me fix the two issues, they are driving me crazy!
You need to put a z-index on your footer:
http://jsfiddle.net/P3ysJ/9/
#footer{
margin:0 auto;
width:950px;
height:335px;
position:fixed;
bottom:0;
z-index: 1000;
color: #c00;
font-size: 3em;
}
<iframe width="500" height="315" src="http://www.youtube.com/embed
/8ZU08c5tFHc?wmode=opaque" frameborder="0" allowfullscreen></iframe>
<footer id='footer'>overlap</footer>
I've seen this question pop up a couple of times without any clear resolution.
I'm loading a simple video
<video src="" controls></video>
Onto my page. The video works and plays well cross-browser (not showing all the format setup for this question since it isn't relevant).
I've then applied a border-radius to the video tag. This works, except in Chrome.
I can even pull up the console and see the border-radius applied to the video tag, but it isn't rendering the border radius.
Is anyone familiar with this issue? I've read it's a bug in Chrome, but I'm not sure if it's been resolved or if there might be a workaround?
I'm not sure but I think that this is what's meant by "using SVG":
The idea is to create a HTML overlay element that is the same width and height as the video, set multiple SVG backgrounds on it (border-radius's in whatever the background color is) and make it "mouse-invisible" (pointer-events: none):
Demo: http://jsfiddle.net/pe3QS/3/
CSS (minus the SVG's):
#video-container {
position: relative;
}
#overlay {
position: absolute;
width: 320px;
height: 240px;
left: 0;
top: 0;
pointer-events: none;
background-image: url('data:image/svg+xml...');
background-position: top right, top left, bottom left, bottom right;
background-repeat: no-repeat;
}
HTML:
<div id="video-container">
<video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
<div id="overlay"></div>
</div>
You could also use a psuedo-element (not on the video element, it would'nt display):
Demo: http://jsfiddle.net/pe3QS/2/
CSS:
#video-container:after {
position: absolute;
width: 320px;
height: 240px;
content: " ";
.....
HTML:
<div id="video-container">
<video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
</div>
The SVG's are pretty simple to modify, just change the fill attribute on each of them.
This could probably also be done via JS.
I have a flash video player that I would like to embed in other pages, so I created an iframe to do this. It has to be an iframe because it depends on other swf files that get loaded into it (plugins).
The weird thing is the video does not play when loaded inside the iframe, but if I go to the html source and cut and paste the tag outside of the iframe it works.
<iframe width="500px" height="500px" src="http://somedomain.com/embed.aspx" ></iframe>
Check your console. If you are also getting these errors:
"Blocked script execution in '...' because the document's frame is sandboxed and the 'allow-scripts' permission is not set."
You can configure those sandbox flags on the iframe
<iframe width="100%" sandbox='allow-scripts allow-same-origin'></iframe>
Got it working by adding come css to the html page containing the flash player. It seems the absolute positioning made all the difference.
html, body, object { margin: 0px; padding: 0px; position: absolute; height: 100%; width: 100%; overflow: hidden; background-color: #000; }