CODEWITHSUNDEEP
htmliframew3c-validation
Kevin Masson DunkDesign
Kevin Masson DunkDesign

Reputation: 533

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

Upvotes: 53

Views: 70738

Answers (5)

Justin Liu
Justin Liu

Reputation: 631

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>

Upvotes: 0

Tuan Cao Minh
Tuan Cao Minh

Reputation: 1

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

Upvotes: 0

Abhishek Agarwal
Abhishek Agarwal

Reputation: 1248

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

Upvotes: 18

Harry Bosh
Harry Bosh

Reputation: 3800

This works in your css

iframe{
    border-width: 0px;
}

Upvotes: 11

user2950291
user2950291

Reputation: 824

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.

Upvotes: 80

Related Questions