＆＃34; iframe元素上的frameborder属性已过时。请改用CSS。＆＃34;

Question

我尝试使用W3C验证程序验证我的网站，但它不起作用。我有一个YouTube iframe，这是错误：

  

iframe元素上的frameborder属性已过时。改用CSS。

屏幕截图：http://i.stack.imgur.com/VCiJV.png

这是我的index.html（裁剪）：

<!-- Video -->
<div class="video-container box-size">
  <iframe width="700" height="312" src="http://www.youtube.com/embed/OfUPsnAtZMI" frameborder="0" allowfullscreen></iframe>
</div>

我该如何纠正？

Answer 1

正如他们所说：“HTML5不支持frameborder属性。请改用CSS。”

css中frameborder的等价物是border: 0px;。将其添加到css中的iframe。

Answer 2

这适用于你的css

iframe{
    border-width: 0px;
}

Answer 3

您的HTML5标记包含<iframe>元素，其中包含以下形式的frameborder属性：

<iframe frameborder="0" … />

HTML5中不再存在此属性。改用CSS：

<iframe style="border:0;" … />

来源：Frameborder is obsolete

Answer 4

您可以将hidden用作border-style或none：

我这样做是为了显示差异。

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>