I have a long discussion with one person i know.
He insists on using iframes to embed YouTube videos as:
<iframe style=”width: 560px; height: 315px; border: none;” src=”http://www.youtube.com/embed/bla-bla-bla?rel=0″></iframe>
that does work for some videos but not for all.
Youtube provides the following code to embed:
<iframe src="http://www.youtube.com/embed/bla-bla-bla?rel=0" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
which obviously works fine.
I was trying to find in specification of iframe if width and height are required. And what happens when they are not provided. But could not quite find the information.
Can someone please help me and explain why the first variant does not work always, and one, as far as i understand, is better of with the second variant?
EDIT1:
so the right answer is below. I just want to comment how i got those wrong curly symbols. The guidelines of one WordPress-based site give users these code snippets. That particular web-site (or it's css; or wordpress in general) don't distinguish between curly and straight quotes, always showing curly. THus when user copy-paste the code - it does not work.
Per our discussion in the comments, the problem was caused by the curly quotes in the first example:
<iframe style=”width: 560px; height: 315px; border: none;”
src=”http://www.youtube.com/embed/bla-bla-bla?rel=0″></iframe>
Changing to straight quotes fixed it:
<iframe style="width: 560px; height: 315px; border: none;"
src="http://www.youtube.com/embed/bla-bla-bla?rel=0"></iframe>
It's helpful to validate your HTML using the W3C Validation Service. That would catch this error and many others.
My guess is that youtube accesses the height and width properties using window.frameElement
https://developer.mozilla.org/en-US/docs/Web/API/window.frameElement
They probably do this to adjust the video quality or something.
Those will not be present if you set the width and height using css, and they may encounter an error in their code and not show the video.
So the answer is, no those attributes are not requried, however in this scenario they seem to be.
I can only tell you for sure if you have an example.
Related
I have a google spreadsheet embedded onto a website with
<iframe src="https://docs.google.com/spreadsheets/SPREADSHEETURL&single=true&widget=true&headers=false" style="display: block; width: 100%; height: 100%;"></iframe>
But I want the table to be expanded vertically be default. You can only see the lower part of the spreadsheet by scrolling, but I want it to be default to show the whole spreadsheet.
BONUS:
I also want to be able to remove the part at the top of the spreadsheet that says the spreadsheet name.
Thanks in advance.
EDIT:
I may have found what I was looking for here
<iframe width="100%" height="160" frameborder="0" scrolling="yes" src="https://docs.google.com/spreadsheets/SPREADSHEETURL&single=true&widget=false&chrome=false" allowfullscreen=""></iframe>
Which works partially, but the scrolling problem is still there. Scrolling is the only way to see the lower portion of the spreadsheet. Also, it takes a long time to update on the website, but that may be Google's problem.
Found it out, I must've been overthinking it.
<iframe width="100%" height="1600" frameborder="0" scrolling="yes" src="https://docs.google.com/spreadsheets/SPREADSHEETURL&single=true&widget=false&chrome=false" allowfullscreen=""></iframe>
I just changed the height parameter to whatever I need.
This site helped me out a lot.
bug here: https://groups.google.com/a/chromium.org/forum/?fromgroups#!topic/chromium-bugs/eUfzp3UJDwo%5B1-25%5D
just encountered this problem, streaking up my screen on chrome, but not on firefox, or IE. anyone on a mac seen this?
Removing the background-color:
body {
...
background-color: #fff;
}
in the CSS of the HTML document which is rendered into the iFrame did solve the issue in my case.
After one full day trying to solve this bug I can confirm that there's another workaround and it's probably an "easier" one.
In my case these solutions didn't work. In fact, applying them to the examples in the issue tracker of chrome (look for them here http://code.google.com/p/chromium/issues/detail?id=143354 ) didn't actually solve the problem. (PS: the problem is usually based on using the scrollbar and SOMETIMES in using the mouse scrolling).
Therefore I did some searches for services the worked and guess what:
Visual Website optimizer didn't have this problem
and they are indeed using and iframe, good job guys!
So, what solution did they use?
They used a fixed height.
(yup!)
So, take the example in the chrome issue 143354 (the one with the red background, ok?)
and change the code from
<html>
<body style="background-color:red">
<p>This is outside the iframe</p>
<iframe width="80%" height="50%" frameborder="0" src="./page2.html"></iframe>
</body>
</html>
to
<html>
<body style="background-color:red">
<p>This is outside the iframe</p>
<iframe width="80%" height="50%" src="./page2.html" style="margin: 0px !important; padding: 0px !important; height: 286px; "></iframe>
</body>
</html>
This will solve the problem of red lines.
To fix my webapp I needed to calculate the height on every window resize, put those margin/padding , and avoiding relative positioning on the iframe, nothing more.
Hope it helped (It almost drew me out of my mind to solve it)
Still same problem here using Windows 7 and chrome 22.0.1229.94 except white lines appear when scrolling down, not scrolling up.
I've tried all solutions proposed but nothing seems to fix it.
Setting -webkit-margin-after and -webkit-margin-before make lines disappear when scrolling down but now it appear when scrolling up.
In chrome group forum, they say it should be fixed in 23 series but who knows...
Finally, can find a workaround (not so cool but works) inspired by some read.
Here it is:
$(document).ready(function(){
//to fix scrolling bug in iframe for chrome (issue: http://code.google.com/p/chromium/issues/detail?id=140447)
if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
var ibody = document.getElementsByTagName('body')[0];
window.onscroll = function(e) {
ibody.style.visibility='hidden';
ibody.offsetHeight;
ibody.style.visibility='visible';
}
}
});
Had the same issue. Resolved by setting position style to relative:
<iframe ... style="position: relative"></iframe>
The issue causing these visual anomalies has been confirmed fixed in the latest canary build of chrome (>= 25.0.1365.1 canary), so hopefully the chrome stable channel should have the fix fairly soon.
I found out that it's possible to workaround this Chrome bug by shaking up the DOM a bit.
E.g. this was causing the issue:
<h1>foobar</h1>
<iframe src="..." style="border:none"></iframe>
... but replacing the H1 with SPAN fixed it:
<span style="display:block">foobar</span>
<iframe src="..." style="border:none"></iframe>
I ran in to a similar problem and was able to fix it in my case by setting -webkit-margin-after and -webkit-margin-before to 0.
<h1 style="-webkit-margin-after:0; -webkit-margin-before:0;">foobar</h1>
<iframe src="..."></iframe>
Also, I initially tried replacing the H1 with a span as in Jiri's example, but the lines came back when I tried to apply a top and bottom margin of .2em to the span. Removing margins cleaned things up (I just used line-height to create some space around the header)
I am working on this site for a client of mine.
Issue is that the dropdown menu on the home page hides behind the embedded youtube player. It seems to be a simple css problem involving z-index but I have been unable to solve it. Maybe it has something to do with the youtube embed.
I have tried to set the z-index of the menu but it does not seem to be effective.
I almost forgot to tell you that the problem occurs on IE9 specifically.
Also, I'm not a css expert so please just point out what the issue is.
Use below code for youtube iframe:
<iframe width="597" height="323" src="http://www.youtube-nocookie.com/embed/Rahab_AMCkE?wmode=transparent" rel="0" frameborder="0" allowfullscreen=""></iframe>
Add wmode=transparent" just after the source(src) of video
This is a Flash issue. When embedding Flash, the default is wmode=window, making the SWF overlay any HTML object on the page. To avoid that, use wmode=opaque or wmode=transparent which allow HTML elements to overlap SWF content. For more info and the difference between the two see Adobe's help.
Define your css style like this.
.navigation ul ul{
z-index:3;
}
.lcd{
position:relative;
z-index:1;
}
use
_z-index:1000001;
do not remove
z-index: //whatever;
I am trying to remove the iframes scrollbars and frameborder. I cannot use frameborder=0 and scrolling=no since they are no longer supported in HTML5. The seamless attribute throws a warning stating it isn't yet implemented according to the W3C Validator. I found a page online that said to use overflow:hidden to remove the scrolling, however it is not removing the scrollbars, at least in my google chrome. I haven't checked other browsers. Also the frameborder is still there, even though I used border:none. I also was trying to set the width and height of the iframe using css, however it didnt want to listen. Here is my current code:
#vidframe
{
width: 577px;
height: 358px;
overflow: hidden;
border: none;
}
<iframe name="videoframe" id="vidframe" src="video1.html"></iframe>
Yeah, I easily could add width=xxx height=xxx into the iframe tag, but my understanding that with HTML5 the goal is to get AS MUCH of the coding into CSS as possible... So shouldn't I be able to set the iframes width and height in the stylesheet? Again, overflow hidded didnt remove the scrollbars... and border: none didnt remove the borders...
The solution was to add overflow:hidden in the css of the file that was being loaded into the iframe. If the document is not something you can control the source code of, then use javascript to appent the overflow hidden attribute to it's body.
Remove iframe border and scroll bar using javascript,see the following link...
How to remove border from iframe in IE using javascript
Hello Everyone and Good Morning,
I am working with the page:
http://702wedding.com/live/
And it works in ALL my browsers Execpt IE. I dont have IE so I am kinda flying in the dark as far as fixing it. My boss is saying something about the iframe border showing in IE and w/e else any of you IE'ers can see. Also the font on the index page BEHIND the modal is showing tiny font.
I am on a mac and desprately need a way to see IE in the future, BUT can anyone help me fix this this morning?
Problems:
iFrame Showing in IE
Tiny Font behing Modal in Index Page.
Thank You all very much, as always.
^_^
I see the frame border in IE7. Try setting border: 0 and background: transparent in your styles for the iframe. Then add allowtransparency="true" as an attribute to the iframe.
Instead of border:none, try setting the border to an explicit value:
style="border:0px solid #fff; overflow:hidden; width:100px; height:21px;"
Also, try setting the display selector to block.
I have this style on an iFrame, and the border does not display in IE:
style="border:0px solid #FFF; display:block; left:0; top:0px; height:100%; width:100%;
Also, you have an extra comment in your Javascript, causing an error:
$(".example5").colorbox({innerWidth:686, innerHeight:624 ->,<- }
If you don't have any browser try https://browserlab.adobe.com/en-us/index.html.
you can get a preview of your link in set of defined browser (almost all ).
set your border="0" and frameborder="0" on the iframetag
The page is at least functional in IE6:
Note that the nav at the top of that dialog is broken. IE6 doesn't listen when you tell it a frame has no CSS "border" - you have to explicitly tell it it has no frameborder, so use border="0" frameborder="0" on the iframe tag.
Behind the modal dialog, the text isn't "tiny" - in fact, it's rendered similar to how FF renders it (though, it's IE6, so the text is hard to read/aliased, of course)
And, for future reference, you can use BrowserShots to get screenshots of the page in a variety of different browsers/versions, including IE[4-9], last time I checked.
Otherwise, you could look into IEs4Linux which'll let you run IE6 and 7 on Linux, provided you have a valid Windows license.