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);
});
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;
}
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 can I get an iframe to load the whole page into the next page?
I am a N00b html coder and i was wondering
<center>
Home
<hr>
and loaded it into an iframe, and click on it, it loads inside of the iframe. I want it to load on the entire page.
If I understand you correctly, you want an iframe on a page, but when the iframe is clicked on, you want the page in the iframe to open in a new tab. This is what I did to do this:
<!DOCTYPE html>
<html>
<head>
<style>
div.iframe-link {
position: relative;
float: left;
width: 730px;
height: 330px;
margin: 0 1em 1em 0;
}
a.iframe-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="iframe-link">
<iframe src="http://en.wikipedia.org" width="750" height="350">
Your browser does not support iframes.
</iframe>
</div>
</body>
</html>
In this iframe, you can still use the scrollbars, but you cannot do anything in the iframe without going to that page. Change the width and the height in div.iframe-link to change the size of the hyperlink part of the iframe. My example has Wikipedia instead of Google.
:)
Also, if you do not want the iframe link to open in a new tab, just change
to
If I understand it correctly, you want to be able to click on a link inside an iframe and open it in the entire window?
In that case you will need to specify a target on your link, as such:
Home
This will make sure that the top frame (i.e. the window) follows the link.
Try this. For me it works
<iframe src="http://www.google.com"></iframe>
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.
I am using an iframe and in the iframe I am loading a dynamic image. I want to use that image as a link to the respective article. Actually this is a news site.
I already have used many stuffs like:
<iframe src="dynamic url"></iframe>
does work with IE but not with safari and FF.
and
some tweets like
div.iframe-link {
position: relative;
}
a.iframe-link1 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
code:
<div class="iframe-link">
<iframe src="file" width="90px" height="60px" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" allowtransparency="true" noscaling="true">
</iframe>
</div>
worked in FF and Safari not in IE7,8.
SO can anybody suggest what to do..
any help would be appreciated.
The Iframe is loading a dynamic address of image like::::
<div class="news_img01">
<div onclick="window.open('URL','_self')" style="cursor: pointer;"><br>
<iframe scrolling="no" height="60px" frameborder="0" width="90px" noscaling="true" allowtransparency="true" marginwidth="0" marginheight="0" src="thumbnails/1188.gif">
</iframe>
</div>
</div>
so i cant add tag inside but already wrapped tag inside . it worked for IE but not for others like FF, Safari..
You could create a overlay to make the area over a iframe clickable. This worked for me.
<div style="position:relative;">
<iframe src="somepage.html" width="500" height="500" />
</div>
I found this code snippet from this thread here:
https://forums.digitalpoint.com/threads/how-do-i-make-this-iframe-clickable.2320741/
According to your earlier comments, you were using the iframe in order to crop an image of unknown size to a 60 by 90 pixel box. To do this, use the overflow:hidden css attribute on the a tag, which slices off any content not fitting within the border-box.
<div class="news_img01">
<a href="URL"
style="display: block; width:90px; height:60px; overflow:hidden;">
<img src="thumbnails/1188.gif" />
</a>
</div>
Why don't you enclose <iframe> inside a <div> and add an onClick event on the containing <div> to navigate the user to the desired page?
<div onClick=""> <!-- Or just bind 'click' event with a handler function -->
<iframe ...></iframe>
</div>
By adding the following css rule, it will work as if the iframe were a clickable link.
div {
cursor: pointer
}
iframe {
pointer-events: none; // This is needed to make sure the iframe is not interactive
}
Set css property pointer-events to none on iframe tag.
a {
display : block; /* or inline-block */
}
a iframe {
pointer-events : none;
}
<a href="https://stackoverflow.com/questions/3317917/use-iframe-as-a-link">
<iframe src="https://www.africau.edu/images/default/sample.pdf"></iframe>
</a>
If the iframe is loading an HTML page, just put your <a> tags in the source of that.
If it is just loading an image, why are you not using an <img> tag?
I would recommend using jQuery to select the image element in that iframe and wrap it with <a> tag so it's clickable.
I believe it's possible to attach an onHTMLReady listener to the document inside the iframe. Then wait for the iframe to load and then make the image clickable
$(frames[0].document).ready(function(){ /*find and wrap with a-tag goes here*/ });
I have the same problem and I solved it with this code:
div.iframe-link {
position: relative;
float: left;
width: 960px;
height: 30px;
}
a.iframe-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ffffff;
opacity: 0.1;
filter:Alpha(opacity=10);
}
For me,it works for all browsers and IE8 as well.
Hope it helps :)
I faced such type of problem and solved by this:
a.iframe-link1 {
position:absolute;
top:0;
left:0;
display:inline-block;
width:90px;
height:60px;
z-index:5;
}