iframe의 유효성 검사

조회수 2125회

선생님 과제 중에 iframe을 넣으면 어떻게 밸리데이트 되는지 궁금해서 넣어봤습니다. 2가지 질문이 생겼습니다.

iframe을 사용하면 자동으로 html 안에 html 이하 헤드 요소까지 중복되는데, 이경우는 왜 밸리데이트에 에러가 안나는지 궁금합니다.

페이지에 유튜브 영상 추가 요청을 많이 받는데, 이미지에 체크한 부분처럼 allow="" 가 유효성 검사에서 에러가 납니다. 실상 오토 플레이나 유튜브 제목 삭제 등등 allow 안에 꼭 써야할 요소들이 많은데.. ㅠ.ㅠ 유효성 검사도 통과하고 해당 요소들도 쓸 수 있는 방법은 없는지 궁금합니다.이미지

  • (•́ ✖ •̀)
    알 수 없는 사용자

2 답변

  • 안녕하세요 경란님. 야무입니다. :-)

    <iframe> 요소와 관련한 질문에 답변 드려봅니다.

    1. <iframe> 요소와 문법 유효성 검사

    iframe 요소를 사용하면 문서에 외부 문서를 삽입해 보여줍니다. 현재 문서에 다른 문서를 주어진 영역 내에 그려주는 것이죠. 이는 현재 문서와 외부 문서가 각각 독립적인 웹 문서이고, HTML 문법 유효성 검사 도구 에서 이를 구별하여 현재 문서만 문법 검사만 한다고 이해하시면 좋을 것 같습니다. 그러한 이유로 iframe을 삽입해 <head>가 중복된 것처럼 보여도 오류가 발생하지 않는 것입니다.

    2. Youtube <iframe> 코드와 문법 유효성 검사 통과 문제

    Youtube 페이지의 공유 기능을 통해 퍼가기를 누르면 iframe 코드를 제공하는 팝업 윈도우가 뜨죠. (아래 이미지 참고)

    이미지

    제공된 코드를 HTML 문서에 가져와 그대로 사용하면 Youtube 영상을 현재 웹페이지에서 제공할 수 있지만, 문법 검사에서는 오류가 발생합니다.

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

    이미지

    오류 내용을 살펴보면 2가지인데 하나는 frameborder 표현 속성 대신 CSS를 사용하라는 것이고, 다른 하나는 allow 비 표준 속성을 사용한 것에 대해 허용되지 않는 속성 임을 알려줍니다.

    첫번째 문제를 해결하려면 CSS를 사용해 간단하게 해결 가능하겠죠.

    iframe { border: none; }
    

    하지만 문제는 allow 비표준 속성에 설정된 값을 어떻게 해야 하는가에 대한 고민일 겁니다. 자동 재생, 제목 제거 등등 설정이 필요한데 말이죠. :-( 웹 표준도 준수하고 Youtube 옵션도 사용하고 싶고...

    그런데 의외로 문제 해결은 간단합니다. :-)

    먼저 Youtube 개발자 문서 iframe Player API - 매개변수를 통해 지원하는 매개변수 설정을확인합니다. 이 중 설정하고자 하는 매개변수를 찾습니다.

    • 자동 재생 설정(autoplay)
    • 제목 표시 설정(showinfo)
    • 컨트롤 표시 설정(controls)

    다음 단계는 <iframe> 요소의 src 속성에 설정된 Youtube 영상 URL 뒤에 쿼리(?)를 붙인 후, 매개변수=값으로 설정합니다. 매개변수 값이 여러 개일 경우는 매개변수1=값&amp;매개변수2=값 처럼 매개변수 사이에 &amp;를 추가해 설정합니다.

    아래 예시 코드를 살펴보세요. 예시 코드는 자동재생과 제목 표시 안함이 설정되어 있습니다.

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

    마지막 단계는 작성한 코드에 문법 오류가 없는지 확인하면 됩니다. 문법 검사를 돌려봅니다. 그러면 아래 이미지처럼 깨끗하게 문법 검사에 통과되는 것을 확인할 수 있습니다. :-)

    이미지

    웹 표준도 준수하고, Youtube에서 제공하는 기능도 활용하고 문제가 해결되었네요!

    마지막으로 Youtube 플레이어 데모 서비스를 이용하면 보다 손쉽게 매개변수를 적용하고 생성된 코드를 얻을 수 있습니다. 위에서 작성한 코드를 직접 입력하지 않아도 매개변수 체크박스를 체크하는 것만으로도 코드를 생성할 수 있어 편리합니다. :-) 이용해보세요~

    이미지

    • (•́ ✖ •̀)
      알 수 없는 사용자
  • 넘나 자세한 답변 감사합니다. ^

    • (•́ ✖ •̀)
      알 수 없는 사용자

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)