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;
}
Related
So currently, the twitter follow button works as expected on my website in Chrome 28 and above. I noticed that it generates an iframe with these following attributes:
<iframe id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;"></iframe>
This is added at the bottom of the body element; however, in Chrome 27 and below it adds it in between the head tag and the body tag. Also, it adds it without the rufous-sandbox ID and forces it to "push" the body element down so there is a large white space at the top.
In Chrome 27 and below:
<head>...</head>
<iframe>..</iframe>
<body>...</body>
How can I fix this? I tried adding the same styles to any iframe element, but that didn't work. The twitter script is in the body element, maybe I'm placing it in the wrong place ? Should it be in the head ?
I recommend you go back to twitter and get the code for it, this is my code.....
Follow Us!
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
How to remove iframe's scrllbars? In Firefox it's easy, however I found myself unable to achieve this effect to be compatible with all major browsers.
If the CSS technique isn't working for you, try also adding the property scrolling="no" to the iframe HTML tag.
<iframe scrolling="no" src="..." >
CSS
iframe {
overflow: hidden;
}
And/or use Coin_op's answer, it seems to be better.
on top of Alex's answer, I also had to add the following to remove horizontal toolbars from both FF and Chrome. This was added in the i-frame page, even though it should be possible to add it in the css as well:
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
<iframe runat="server" id="_theFrame" src="url" width="100%" scrolling="no" height="200" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0" style="display: block; background: none repeat scroll 0% 0% transparent; width: 100%;" />
i'm struggling to get a responsive iframe but so far nothing..
I use the following css and html.thanks in advance.
.testme_container {
position: relative;
height: 0;
overflow: hidden;
}
.testme_container-16x9 {
padding-bottom: 56.25%;
}
.testme_container-4x3 {
padding-bottom: 75%;
}
.testme_container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<div class="testme_container">
<iframe src="http://www.gmail.com" allowfullscreen></iframe>
</div>
Could you try to explain in detail what you want to achieve?
I tried your code and judging by the names of your CSS classes (16x9, 4x3) it seems to work fine, however, you will have to use a different URL to test it:
<div class="testme_container testme_container-4x3">
<iframe src="http://www.w3schools.com/" allowfullscreen></iframe>
</div>
DEMO
The reason www.gmail.com doesn't show up is, because Google doesn't allow it to be displayed in an iframe. If you look at the jsfiddle you can see, I did not change anything about your code but the link and I added the class "testme_container-4x3".
This JavaScript function relies on jQuery to make all iframes on the page responsive. It handles video embeds to preserve their aspect ratio without extra vertical or horizontal margin but you need to determine the aspect ratio you'll be using in your embedded video.
https://gist.github.com/dylanvalade/b2ba4eaa99ae7968cfd8
You can actually do this in native javascript without any need to rely on jQuery or other framework/library. Responsive Iframes would work perfectly for this.
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);
});
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.