"The frameborder attribute on the iframe element is obsolete. Use CSS instead."

Question

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?

Does this answer your question? [HTML5 and frameborder](https://stackoverflow.com/questions/3601273/html5-and-frameborder) — BuZZ-dEE, Jun 29 '20 at 09:15

score 67 · Accepted Answer · answered Oct 09 '14 at 09:01

67

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 09 '14 at 09:01

user2950291

694
6
7

4

according to answer for [question] (http://stackoverflow.com/questions/3601273/html5-and-frameborder) you can replace `frameborder` in css with `border: none;` – ahmed hamdy Mar 26 '15 at 13:27
3

Furthermore, `border: 0px` should otherwise be `border: 0` – Thomas Williams Sep 12 '20 at 10:00
"should" is not true. It could be `border: 0`, but `border: 0px` is [perfectly fine](https://stackoverflow.com/a/16484713/735926). – bfontaine Aug 31 '23 at 08:58

score 16 · Answer 2 · edited Jun 20 '16 at 16:40

16

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

edited Jun 20 '16 at 16:40

Mr Lister

45,515
15
108
150

answered Jun 18 '16 at 02:54

Abhishek Agarwal

1,190
2
19
38

6

That's what the accepted answer, given two years ago, says. – Mr Lister Jun 20 '16 at 16:41
3

True, but this way of writing the answer was really easy to see "take X...write Y instead" Thanks to all! – Michael Scott Asato Cuthbert Sep 29 '19 at 20:49
@MichaelScottAsatoCuthbert in this case one should edit the existing answer, not duplicate it. – bfontaine Aug 31 '23 at 08:59

score 10 · Answer 3 · answered Mar 30 '16 at 02:45

10

This works in your css

iframe{
    border-width: 0px;
}

answered Mar 30 '16 at 02:45

Harry Bosh

3,611
2
36
34

Sometimes the edge is held – Luis Jul 15 '23 at 14:33

score 0 · Answer 4 · edited Aug 31 '23 at 08:55

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>

Tuan Cao Minh · Answer 5 · 2022-04-16T08:20:25.920

0

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

edited Apr 16 '22 at 08:20

answered Apr 16 '22 at 08:15

Tuan Cao Minh

1
1

"The frameborder attribute on the iframe element is obsolete. Use CSS instead."

5 Answers5

Linked