“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: http://i.stack.imgur.com/VCiJV.png

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?

回答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.

回答2:

This works in your css

iframe{
    border-width: 0px;
}

回答3:

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

回答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>

来源：https://stackoverflow.com/questions/26274082/the-frameborder-attribute-on-the-iframe-element-is-obsolete-use-css-instead