Validation of iframe

I put it in because I was curious how it would be validated iframe in the teacher's assignment. I have two questions.

Iframe automatically duplicates html and less than html head elements in html, and in this case, I wonder why there is no error in this case.

I get a lot of requests to add YouTube videos to the page, but allow=""" fails in the validation as checked in the image. In fact, there are many elements that must be used in allow, such as auto play and YouTube title deletion. I wonder if there is a way to pass the ㅠ.ㅠ validation test and use those elements.

validation fast-frontend iframe iframe-validate

2022-09-22 15:47

2 Answers

Hello Kyungran. This is Yamoo. :-)

Answer questions related to <iframe> elements.

Use the iframe element to insert an external document into the document and show it. Draw another document within a given area in the current document. It would be nice to understand that the current document and the external document are independent web documents, and the HTML grammar validation tool distinguishes them and only the current document is checked for grammar. That's why <head> does not appear to be duplicated by inserting iframe.

If you click on the purge via the sharing function on the Youtube page, a pop-up window will appear that provides the iframe code (see image below).

Importing the supplied code into an HTML document and using it as it is allows you to provide YouTube images on the current webpage, but the grammar check results in an error.

<iframe 
  width="560" 
  height="315"
  src="https://www.youtube.com/embed/WdfiJoKkGAY" 
  frameborder="0" 
  allow="autoplay; encrypted-media" 
  allowfullscreen>
</iframe>

If you look at the error, there are two types: frameborder expression properties to use CSS instead of expression properties, and the other is not allowed for using allow nonstandard properties.

The first problem can be solved simply by using CSS.

iframe { border: none; }

However, the problem will be how to do the values set in the allow nonstandard properties. Automatic playback, title removal, and so on. :-( I want to comply with the web standard and use the Youtube option...

But surprisingly, solving the problem is simple. :-)

First, check the supported parameter settings through the YouTube developer document iframe Player API - Parameters. Find the parameters that you want to set.

The next step is to add a query (?) after the Youtube image URL set in the src property of the <iframe> element, and set it to parameter=value. If you have multiple parameter values, set them by adding & between the parameters, such as parameter1=value&parameter2=value.

Look at the example code below. The example code has auto-play and no title display set.

<iframe 
  width="560" 
  height="315"
  src="https://www.youtube.com/embed/WdfiJoKkGAY?autoplay=1&amp;showinfo=0" 
  allowfullscreen>
</iframe>

The last step is to make sure that the code you wrote does not contain grammatical errors. Returns the grammar check. Then, you can see that it passes the grammar check as clean as the image below. :-)

Compliance with web standards, utilization of features provided by YouTube, and problem solved!

마지막으로 Youtube 플레이어 데모 서비스를 이용하면 보다 손쉽게 매개변수를 적용하고 생성된 코드를 얻을 수 있습니다. Direct input parameters without the written code on the idea to check the check box can generate code is convenient. What do you try : -)~

2022-09-22 15:47

Thank you so much for your detailed answer. ^{^}

^{^}

2022-09-22 15:47

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656