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>
Related
I have the premade widget, and I am trying to position it on lower right hand corner with a fixed position so it stays there regardless of scrolling. I for the love of me cannot get it to go where I want it to, it just stays under the content. Please help.
<iframe src="https://discord.com/widget?id=769639393924481044&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
I have tried using a div as done on w3 schools, again unable to make it work.
<div.fixed><iframe src="https://discord.com/widget?id=769639393924481044&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div.fixed>
<div.fixed> does not exist. You have to add a class. The name of the class can be what ever you like. In CSS you will then need the . to access the class. Something like this will work
.fix-me {
position: fixed;
bottom: 20px;
right: 20px;
background-color: orange;
width: 100px;
height: 100px;
}
<div class="fix-me">
<div>what ever content</div>
</div>
I have iframed an RSS feed and I want to cut off specific part on it.
Here's the iframe..
<iframe src="http://rss.ighome.com/gadgets/rss.aspx?desc=1&count=9&color=000&fs=12px&fw=bold&refresh=0&url=http%3a%2f%2fnews.yahoo.com%2frss%2f"
width="500"
height="400px">
</iframe>
If you scroll down to the bottom of the RSS feed, there is a word "More" that I want to cut out. How can I do so?
You can't control the content of the iframe, but you can place something over it so it hides the link.
Something like this:
HTML
<div id="iframe-wrapper">
<iframe src="http://rss.ighome.com/gadgets/rss.aspx?desc=1&count=9&color=000&fs=12px&fw=bold&refresh=0&url=http%3a%2f%2fnews.yahoo.com%2frss%2f" width="500" height="400px"></iframe>
<div id="iframe-overlay"></div>
</div>
CSS
#iframe-wrapper {
position:relative;
}
#iframe-overlay { /* Adjust values as needed */
height:17px;
width:480px;
background-color:#fff;
position:relative;
top:-24px;
left:5px;
}
I have a full page iframe, but in chrome the scroll bar initially loads then disappears, the room is there for it, and you can use it but it's not visible. Works perfect in safari and firefox and chrome on pc, however on a mac you see the well of the scroll bar, but the bar itself is missing.
body,html{
height:100%;
overflow:hidden;
}
#me-branding-bar{
overflow:hidden;
width:100%;
height:40px;
position:relative;
background-color:#ff9900;
}
#me-content{
height:100%;
width:100%;
position:relative;
border:1px solid #ff9900;
}
#me-content iframe{
border:1px solid #000;
overflow:scroll;
}
<div id="me-branding-bar">
</div>
<div id="me-content">
<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="<?php echo $url;?>" style="overflow:visible;height:100%;width:100%;" height="100%" width="100%"></iframe>
</div>
http://jsfiddle.net/RYwty/
Why does the scrollbar disappear in an <iframe> when using Chrome on a Mac?
That's a pretty broad question when your <iframe> contains an entire page from an external site. Let's break it down into a few steps.
The following examples assumes that you use Chrome on a Mac.
Make a simple test
Create a very simple HTML page, put it in an <iframe>, and view it in Chrome on a Mac (DEMO).
The scrollbar does not disappear. Everything seems fine. So it's most likely something on the external site is causing the problem.
Debug the external site
The symptom is that the scrollbar actually appears for a very short time before it disappears, but the page is still scrollable. Maybe JavaScript is causing the problem? Let's disable JavaScript and try it out.
It turns out the scrollbar does not disappear when JavaScript is disabled. So something loaded by JavaScript is causing the problem. Further debugging reveals that a flash object is the culprit.
Make another test
Create two simple HTML test pages and add a flash object to one of them. Put them into different <iframe>s and compare them to see the difference.
<object type="application/x-shockwave-flash"></object>
It turns out the one with a flash object does not have a visible scrollbar.
Conclusion
The scrollbar does not disappear in a normal <iframe>, but the ones with a flash object. It may be a bug, or it may be an intentional dirty hack. Many flash ads and videos are served in <iframe>s and having a scrollbar in them isn't pretty.
But the point is, you are serving external contents in your <iframe> and these are things that you have no control of.
<iframe src="<?php echo $url;?>"></iframe>
Maybe you can try your best to solve an issue or two, but there are dozens of things happening in an external page that can break things here and there. People can even prevent their sites from being placed in an <iframe> with a little help from JavaScript and HTTP headers. As long as the page loads, you should be happy about it. Don't bother too much about minor details like the disappearing scrollbar. Only worry about it when the page isn't actually scrollable. You are talking a scrolling on a Mac. Most of the time this is done by gestures, not scrollbars.
If you do want more control of the external contents, consider loading it on server side with cURL and modifying the contents with HTML parsers.
The code below seems to solve the iframe scrollbar problem in Chrome on a Mac.
This fix is cross-browser compatible with Firefox, Safari, and Opera on Mac and PC.
jsfiddle
HTML:
<div id="me-branding-bar"></div>
<div id="me-content">
<iframe src="http://tsn.ca" height="100%" width="100%" class="iframeclass"></iframe>
</div>
CSS:
body,html{height:100%;overflow:hidden;}
#me-branding-bar{overflow:hidden;z-index:102;width:100%;height:40px;position:relative;background-color:#ff9900;}
#me-content{height:100%;width:100%;position:relative;border:1px solid #ff9900;}
#me-content iframe{border:1px solid #000;}
.iframeclass::-webkit-scrollbar {
width:10px;
}
.iframeclass::-webkit-scrollbar-track {
-webkit-border-radius:5px;
border-radius:5px;
background:rgba(0,0,0,0.02);
}
.iframeclass::-webkit-scrollbar-thumb {
-webkit-border-radius:5px;
border-radius:5px;
background:rgba(0,0,0,0.3);
}
.iframeclass::-webkit-scrollbar-thumb:hover {
background:rgba(0,0,0,0.3);
}
.iframeclass::-webkit-scrollbar-thumb:window-inactive {
background:rgba(0,0,0,0.3);
}
Remove the styles from your html and add scrolling="yes" >> http://jsfiddle.net/95Tes/
<!--same code as before just remove your css styles from the html -->
*{
margin:0;
padding:0;
}
html, body{
height:100%;
width:100%;
}
#me-branding-bar{
width:100%;
height:10%;
position:relative;
background-color:#ff9900;
display:block;
}
#me-content{
display:block;
height:90%;
width:100%;
position:relative;
border:none;
}
#me-content iframe{
border:none;
display:block;
overflow:auto;
}
::-webkit-scrollbar{-webkit-appearance: scrollbarthumb-vertical;}
ant try that link 1 link 2
jsfiddle
This code may help you.I do not have mac so please do not give any negative points,I hope.I want to say you do not use different style in css rule as well as html style.Here you used like that
<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://www.tsn.ca" style="overflow:visible;height:100%;width:100%;"></iframe>
#me-content iframe{
border:1px solid #000;
overflow:scroll;
}
See the image in the other tab or save the image at first and see it to more clear!
Please use this code which I have modified css as well as html
<style>
*{
margin:0px;
paddinig:0px;
}
body,html{
height:100%;
overflow:hidden;
}
#me-branding-bar{
overflow:hidden;
width:100%;
height:40px;
position:relative;
background-color:#ff9900;
}
#clearboth {
clear:both;
}
#me-content{
height:calc(100% - 40px);
width:100%;
position:relative;
border:1px solid #ff9900;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}
#me-content iframe{
border:1px solid #000;
overflow:scroll;
width:100%;
height:100%;
}
</style>
Here is the modified html
<div id="me-branding-bar">
</div>
<div id="clearboth"></div>
<div id="me-content">
<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"
src="http://www.tsn.ca"></iframe>
</div>
Hope it will work!
I'm trying to build a simple responsive site.
For the most part everything is working. But as soon as I start to shrink the site, the YouTube video gets bumped onto the next row. Is there a way to fix this so it stays aligned with the ad to the left?
Here is a link to the demo site:
http://ctrice.ca/test/rwd/
This is the css I'm using.
#ad{ width:100%; max-width:288px; min-height:330px; margin-right:2%; float:left; }
#trailer{ width:100%; max-width:540px; min-height:330px; position:relative; float:left; }
#trailer iframe,
#trailer object,
#trailer embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This is the HTML code:
<div id="ad"><img src="img/ad.jpg" alt="ad" /></div>
<div id="trailer">
<iframe width="460" height="315" src="http://www.youtube.com/embed/C4uOSz1Z9GM" frameborder="0" allowfullscreen></iframe>
</div>
The problem will lie with the iframe. I wish I could remember all the gory details but it's best to get that lesson from an expert by Googling for Scott Jehl and "responsive and responsible" videos and any articles you can find (of which there are many). His specific problem was with ads delivered to the Boston Globe via iframes. Your problem may be that the video is in an iframe.
I know we're not to give answers as "Google for it" but my answer points to the iframe and the many points made by Jiehl are best left to him.
This code seems to work for me. The percentage in CSS is found when you divide the height by the width of your video.
(HTML)
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="315" src="YourVideoURL" frameborder="0" allowfullscreen></iframe>
</div>
(CSS)
`/*/V I D E O * W R A P P E R/*/
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.videoWrapper iframe,
.videoWrapper embed,
.videoWrapper object {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}`
Hope it works for you good luck!
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.