I have a Youtube HTML iframe embed in my page, this is the code:
<iframe src="http://www.youtube.com/embed/gI2eO_mNM88?rel=0&autohide=1&color=white&showinfo=0&theme=dark&wmode=transparent&hd=1" width="470" height="264" frameborder="0" allowfullscreen webkitAllowFullScreen></iframe>
If I press play I get an dotted 1px outline in IE9+8. I have this in my CSS:
embed,
object {
outline: 0;
overflow: hidden
}
But that doesn't seem to help. It doesn't get an outline in Chrome or FF (both latest versions). I also tried putting the iframe in a div with the same dimensions as the iframe and giving that div overflow: hidden, but no luck either.
I've created a fiddle for this case: http://jsfiddle.net/keaukraine/UmTZy/
As you can see, outline appears inside iframe element. You cannot affect styling of elements inside iframe since it is beyond scope of your web page.
A rather ugly solution is to place iframe the way it hides 1px of it's outline. I've placed it inside slightly smaller div and positioned it so it hides this outline. If this solution is OK for you, you can see it in this fiddle: http://jsfiddle.net/raQEH/
Give your iframe an id="iframe" and try this :
#iframe:active, #iframe:focus {
border: none;
outline: none;
}
Try border:0; if outline didn't work.
I just posted this problem at the youtube dev forum. Hope they can solve this from their site
https://groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/gqt_G5d8HYM%5B1-25%5D
Related
In order to create a 508 compliant page I need to ensure that whenever I tab, the focus is visible on the correct item. I have set the tab index of my iframe and am attempting to show visual focus when it is tabbed to in internet explorer. I have tried the following:
iframe:focus {
outline:2px dotted #000;
outline-offset: -2px;
}
but I don't see an outline.
How can I show an outline on my iframe when it is tabbed to.
I think you need to apply your CSS to the body of the iframe's content, not the iframe, since its this content which actually gets focus.
https://bugzilla.mozilla.org/show_bug.cgi?id=112364
So if your iframe has a src of "test.html" then test.html would have a css class like this:
body {
outline:2px dotted #000;
outline-offset: -2px;
}
You might need to play with that a bit, but it demonstrates the misconception here.
I have several videos on my website and wish them to be displayed at a certain size. All is working fine, except that for some bizarre reason 3px is added to the left of each video tag.
I've tested the following with margin-right set to 0 and there is still 3px of white-space visible, even though Firebug doesn't register it.
How can I fix this issue? Thanks.
Here is the HTML I am using -
<video class="video-preview" controls="">
<source type="video/mp4" src="http://localhost/wp-content/uploads/2014/05/Everyone-Bat-Out-of-Hell.mp4"></source>
Sorry, your browser is old and doesn't support the HTML5 'video' tag. Sucks to be you...
</video>
And here is the the CSS -
video{
background-color: #FFFFFF;
cursor: pointer;
vertical-align: middle;
}
#gallery .video-preview{
height: 118px;
margin-right: 20px;
margin-bottom: 20px;
width: 210px;
}
As a video element is inline by default, white space between tags are rendered with a space between them. Much like if you had <span>a</span> <span>b</span> it would be rendered as:a b. Therefore if you have the following:
<video>....</video>
<video>....</video>
<video>....</video>
There will be a space rendered between each of the video elements. Fiddle
The quickest and some what dirty solution, is to put the next open tag next to the closing tag:
<video>....</video><video>
....</video><video>
....</video>
Fiddle
There are other options depending on your layout. You could add a negative right margin to the video element. Thoug this is not always consitent accross browsers.
The next option is to make the video elements block and float them left.
video
{
display:block;
float:left;
}
Fiddle
You may need some further tweaking with this approach depending on your layout.
Say I have the following code:
<style>
iframe
{
border:none;
}
div
{
border: 1px solid;
padding: 10px;
}
</style>
<div>
<iframe></iframe>
</div>
If I view this in any modern browser there is no border around the iframe. But If I view it using IE8 or 7 then the border remains. How can I make the border disappear for older, crappier browsers?
I am also having a few other styling issues with the iframe, so bonus points for anyone can provide a good link that goes over cross browser styling of iframes.
You need to add the following to the iFrame. It's can't be done with just CSS for older browsers:
frameborder="0"
I have an IFRAME with overflows hidden in the css and html. It works in Firefox, but not Chrome/Safari
Why is this?
Right, how about:
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>
as in the scrolling="no"
http://jsfiddle.net/neSBS/
After a pretty big research I've done on this subject I would like to post my answer, which I suggest, could be an addition to Joonas's answer:
<style>
iframe {
overflow:hidden;
}
</style>
(...)
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>
I think, both scrolling and overflow:hidden should be provided, although this solution won't work in a combination of Chrome and HTML5 doctype. scrolling attribute is deprecated in HTML5 and the overflow property doesn't affect iframes in Chrome. I assume, the latter is a bug, since the HTML5 specification says clearly:
In addition, HTML5 has none of the presentational attributes that were in HTML4 as their functions are better handled by CSS:
(...)
- nowrap attribute on td and th.
- rules attribute on table.
- scrolling attribute on iframe.
- size attribute on hr.
- type attribute on li, and ul.
(...)
It's said clearly - in HTML5 scrolling should be replaced by CSS overflow.
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
As found on - Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar
Strange but - transform: rotate(0.00001deg); for div with overflow:hidden; helps for me.
Just width: 99.99%; did the trick for me.
I had this problem in Chrome but not in Firefox.
Use overflow-y:hidden; then the vertical scroll will be hidden.
Even After setting the frameborder attribute in the iframe to 0 there is still some white space present around the iframe border (unlike the original url/link page). Is there any other way to get rid of the white space or some white must be presented around the iframe as it is within the webpage (or part of it) and it cannot be the whole page? Thank you.
Maybe that whitespace is actually the outside margin of the document loaded in the <iframe>. Try styling the loaded document with:
html, body {
border: 0px;
margin: 0px;
padding: 0px;
}
Apply below to iframe
display: block
By adding this CSS we can make iframe in full screen
body,html
{
background-color:#DDEEDD;
padding:0px;
margin:0px;
height:100%;
width:100%;
overflow:hidden;
}
iframe
{
margin:0;
padding:0;
border:none;
overflow:hidden;
background-color:#DDEEDD;
}
try this:
<iframe bgcolor=#FFFFFF frameborder=0 vspace=0 hspace=0 marginwidth=0 marginheight=0 width=100%
height="340"
src="myframe.html">
</iframe>
Simply add style="margin: 0 0 0 0" inside <iframe > tag.
example:
<iframe src="http://www.yahoo.com" style="margin: 0 0 0 0"></iframe>
If you want margin, you must add 'px' after number
(Thanks to "Inspect Element" tool of Safari Browser) this solved my solution.
Frederic's proposal solved my problem: howto get rid off the white border in a fullscreen slideshow for safari browser. Perfect! Many thanks, wimsch [Since I couldn't add a comment on his answer [[< 50]]: I put it here to let him know my gratitude]
try this
<iframe src="....." style="position:absolute;"></iframe>
I ran into a similar problem: I had the iframe inside a figure tag, and there was some white space between the iframe and the figcaption element.
<figure>
<iframe></iframe>
<!-- white space was here -->
<figcaption></figcaption>
</figure>
In my case simply adding iframe { display:block } solved the issue.