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

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:

enter image description here

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?

htmliframew3c-validation


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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user2950291
Solution 2 Mr Lister
Solution 3 Harry Bosh
Solution 4 Community
Solution 5

Related Questions