I’m trying to validate my website with the W3C validator but it doesn’t work. I have a YouTube iframe and this is the error:
The frameborder attribute on the iframe element is obsolete. Use CSS instead.
Screenshot:
And this is my index.html (cropped):
<!-- Video -->
<div class="video-container box-size">
<iframe width="700" height="312" src="http://www.youtube.com/embed/OfUPsnAtZMI" frameborder="0" allowfullscreen></iframe>
</div>
How can I correct it?
BuZZ-dEE
5,78512 gold badges66 silver badges95 bronze badges
asked Oct 9, 2014 at 8:47
1
As they state themselves «The frameborder attribute is not supported in HTML5. Use CSS instead.»
The equivalent of frameborder in css is border: 0px;. Add it to your iframe in css.
answered Oct 9, 2014 at 9:01
2
Your HTML5 markup contains an <iframe> element with a frameborder attribute in the form:
<iframe frameborder="0" … />
This attribute is no longer present in HTML5. Use CSS instead:
<iframe style="border:0;" … />
Source: Frameborder is obsolete
Mr Lister
45.2k15 gold badges107 silver badges150 bronze badges
answered Jun 18, 2016 at 2:54
Abhishek AgarwalAbhishek Agarwal
1,1802 gold badges19 silver badges37 bronze badges
2
This works in your css
iframe{
border-width: 0px;
}
answered Mar 30, 2016 at 2:45
Harry BoshHarry Bosh
3,5152 gold badges34 silver badges34 bronze badges
You can use hidden as border-style or none:
I made this to show the difference.
const button = document.getElementById("submit");
const hidden = document.getElementById("hidden");
const none = document.getElementById("none");
const solid = document.getElementById("solid");
const iframe = document.getElementById("iframe");
const error = document.getElementById("error")
button.addEventListener("click", function() {
if (hidden.checked) {
iframe.style.borderStyle = "hidden";
} else if (none.checked) {
iframe.style.borderStyle = "none";
} else if (solid.checked) {
iframe.style.borderStyle = "solid";
} else {
error.textContent = "Choose the border then click Apply";
setTimeout(function(){ error.textContent = "" },1000);
}
});#iframe {
border-style:solid;
}
#error {
color:red;
font-size:larger;
}<div align="center">
<iframe id="iframe" allowfullscreen="allowfullscreen"></iframe>
<br />
<input type="radio" name="mode" id="hidden"><label for="hidden">Hidden border</label>
<input type="radio" name="mode" id="none"><label for="none">No border</label>
<input type="radio" name="mode" id="solid"><label for="solid">Solid border</label>
<br />
<button id="submit">Apply</button>
<div id="error">
</div>
</div>
answered May 24, 2020 at 17:26
Justin LiuJustin Liu
5815 silver badges21 bronze badges
I have a manual workaround which is to remove the frameborder=»0″ attribute by adding the code in the post admin.
<iframe title="K8 ký kết hợp đồng chính thức với Manchester City" src="https://www.youtube.com/embed/mNBbhn_pJik?feature=oembed" width="640" height="360" allowfullscreen="allowfullscreen"></iframe>
remove frameborder
answered Apr 16, 2022 at 8:15
Всем привет! Есть сайт на wordpress, в котором установлена контактная форма contact form 7 с модулем внутри папки recaptcha.php, где есть такой код:
<noscript>
<div style="width: 302px; height: 422px;">
<div style="width: 302px; height: 422px; position: relative;">
<div style="width: 302px; height: 422px; position: absolute;">
<iframe src="<?php echo esc_url( $url ); ?>" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;">
</iframe>
</div>
<div style="width: 300px; height: 60px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;">
</textarea>
</div>
</div>
</div>
</noscript>Прогоняю сайт через валидатор и он выбивает ошибки в этом месте
Error: The frameborder attribute on the iframe element is obsolete. Use CSS instead.
From line 271, column 5; to line 271, column 194
te;»>↩Error: The scrolling attribute on the iframe element is obsolete. Use CSS instead.
From line 271, column 5; to line 271, column 194
te;»>↩ ↩
Знаю, что можно заменить соответственно frameborder=»0″ на style=»border:0;» и scrolling=»no» на style=»overflow:hidden;» , но как сделать так, чтобы при обновлении плагина эти изменения не слетели? Загвоздка в том, что код не расположен в какой-либо функции..
Solution 1:[1]
As they state themselves «The frameborder attribute is not supported in HTML5. Use CSS instead.»
The equivalent of frameborder in css is border: 0px;. Add it to your iframe in css.
Solution 2:[2]
Your HTML5 markup contains an <iframe> element with a frameborder attribute in the form:
<iframe frameborder="0" … />
This attribute is no longer present in HTML5. Use CSS instead:
<iframe style="border:0;" … />
Source: Frameborder is obsolete
Solution 3:[3]
This works in your css
iframe{
border-width: 0px;
}
Solution 4:[4]
You can use hidden as border-style or none:
I made this to show the difference.
const button = document.getElementById("submit");
const hidden = document.getElementById("hidden");
const none = document.getElementById("none");
const solid = document.getElementById("solid");
const iframe = document.getElementById("iframe");
const error = document.getElementById("error")
button.addEventListener("click", function() {
if (hidden.checked) {
iframe.style.borderStyle = "hidden";
} else if (none.checked) {
iframe.style.borderStyle = "none";
} else if (solid.checked) {
iframe.style.borderStyle = "solid";
} else {
error.textContent = "Choose the border then click Apply";
setTimeout(function(){ error.textContent = "" },1000);
}
});#iframe {
border-style:solid;
}
#error {
color:red;
font-size:larger;
}<div align="center">
<iframe id="iframe" allowfullscreen="allowfullscreen"></iframe>
<br />
<input type="radio" name="mode" id="hidden"><label for="hidden">Hidden border</label>
<input type="radio" name="mode" id="none"><label for="none">No border</label>
<input type="radio" name="mode" id="solid"><label for="solid">Solid border</label>
<br />
<button id="submit">Apply</button>
<div id="error">
</div>
</div>Solution 5:[5]
I have a manual workaround which is to remove the frameborder=»0″ attribute by adding the code in the post admin.
<iframe title="K8 ký k?t h?p ??ng chính th?c v?i Manchester City" src="https://www.youtube.com/embed/mNBbhn_pJik?feature=oembed" width="640" height="360" allowfullscreen="allowfullscreen"></iframe>
remove frameborder
If you have a web page that contains a frameborder setting
within an
iframe element, e.g., frameborder="0" to prevent a border
around the iframe, if you check the webpage with the W3C
Nu Html Checker, which
validates
HTML5 code,
you will see the following message:
Error
The frameborder attribute
on the iframe
element is obsolete.Use CSS instead.
The CSS alternative listed at
Presentational elements and attributes is «‘border’ on iframe». So if
you have the following:
<iframe frameborder=»0″ … >
You can substitute the following, instead:
<iframe style=»border: 0;» … >
Or you can use the following
HTML code,
instead:
<iframe style=»border: none;» … >
Another obsolete element in HTML 5 that applies to iframes is the
scrolling attribute. E.g., if you check a page that contains HTML code
similar to the following with the Nu Html
Checker, you will see a message indicating that the scrolling attribute
is obsolete:
Error
The scrolling attribute
on the iframe
element is obsolete.Use CSS instead.
The CSS alternative listed at
Presentational elements and attributes is to use «‘overflow’ on the
root element in the containing document».
I’ve found several webpages where people have stated the solution to avoid
scroll bars on an iframe is to apply style="overflow:hidden" to
the iframe itself. E.g.,
How to fix: The scrolling attribute on the iframe element is obsolete. Use CSS
instead. So if you have the following:
< iframe scrolling=»no» … >
The suggested substitute would be the following, instead:
<iframe style=»overflow:hidden;» … >
You can obtain additional information on the overflow property at
CSS overflow
Property.
E.g., below is an iframe with scrolling="no":
And the same code except for scrolling="yes":
And the same code with style="overflow:hidden;", instead:
As you can see, it doesn’t work; the scrollbar still appears. Yet,
I’ve found many webpages where people have stated that is the
solution to avoid scroll bars on an iframe. But I have found
other postings indicating that overflow: hidden
won’t work for iframes, e.g., James Donnelly’s response to HTML iframe — disable scroll on Stack Overflow.
For this example, since I control the source document I’m including using
iframe, I can put style="overflow:hidden;" on
the body tag of the included document, i.e.
<body style="overflow:hidden;">, instead. That works and
is an instance where I’m applying it to «the root element
in the containing document», but that’s not helpful in cases where
the page included is from someone else’s site, such as an Amazon ad, etc.
E.g., below is the same example where the «overflow: hidden» is applied
to the body tag in the included document which prevents the appearance of a
scroll bar.
I’ve also tried applying style="overflow:hidden;" on a
surrounding div, instead, since I’ve seen some postings indicating that
might eliminate the scrollbars, but it hasn’t helped as shown in the
example below:
Since, though the scrolling= attribute is deprecated with
HTML 5,
it is still understood by browsers in use today, I’m going to continue
to use it and just ignore messages indicating the attribute is obsolete when
I check pages for their HTML 5 validity. If I check pages with validators
that check for compliance with HTML 4.1, I don’t see any complaints about the
code.
References:
-
Clipping Content Using the overflow CSS Property
By: kirupa
Date: August 3, 2013
KIRUPA | become a better web developer -
HTML iframe — disable scroll
Asked: March 19, 2013
Stack Overflow
Solution 1
As they state themselves «The frameborder attribute is not supported in HTML5. Use CSS instead.»
The equivalent of frameborder in css is border: 0px;. Add it to your iframe in css.
Solution 2
Your HTML5 markup contains an <iframe> element with a frameborder attribute in the form:
<iframe frameborder="0" … />
This attribute is no longer present in HTML5. Use CSS instead:
<iframe style="border:0;" … />
Source: Frameborder is obsolete
Solution 3
This works in your css
iframe{
border-width: 0px;
}
Comments
-
I’m trying to validate my website with the W3C validator but it doesn’t work. I have a YouTube iframe and this is the error:
The frameborder attribute on the iframe element is obsolete. Use CSS instead.
Screenshot:
And this is my index.html (cropped):
<!-- Video --> <div class="video-container box-size"> <iframe width="700" height="312" src="http://www.youtube.com/embed/OfUPsnAtZMI" frameborder="0" allowfullscreen></iframe> </div>How can I correct it?