"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?

Justiciar

Does this answer your question? HTML5 and frameborder – Stacy

Answer 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.

Catboat

according to answer for [question] (https://mcmap.net/q/54932/-html5-and-frameborder) you can replace frameborder in css with border: none; – Collegium

Furthermore, border: 0px should otherwise be border: 0 – Bilbao

"should" is not true. It could be border: 0, but border: 0px is perfectly fine. – Scevour

border: none? (note: I get that it's longer than border: 0px and I get those are functionally equivalent but, border: none expresses what I want (no border) instead of actually wanting a border but with 0 size. – Bernhard

Answer 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

Delirious

That's what the accepted answer, given two years ago, says. – Johiah

True, but this way of writing the answer was really easy to see "take X...write Y instead" Thanks to all! – Holofernes

@MichaelScottAsatoCuthbert in this case one should edit the existing answer, not duplicate it. – Scevour

Answer 3

This works in your css

iframe{
    border-width: 0px;
}

Bitters

Sometimes the edge is held – Grundy

Answer 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>

Guria

Answer 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

Anxiety