EverGiver

<iframe> 태그 본문

Front-End (웹)/HTML

<iframe> 태그

친절한개발초보자 2021. 8. 19. 02:30
728x90
<iframe> 태그

 

외부에 있는 여러 가지 내용을 자신의 html 파일에 가져오기 해주는 태그

(보통 요즘은 유튜브 동영상을 가져올 때 많이 사용하는 태그)

  • 가져오는 방법 
    1. 원하는 유튜브 영상 클릭
    2. (광고 진행 시) 광고 끝난다음에 마우스 우클릭
    3. 소스코드 복사
    4. 자신의 html body부분에 붙여넣기 
  • video태그와 다르게 태그 자체에 가로와 세로 값을 조절해주는 구문이 있기 때문에 태그 안에 width , height로 값을 조절해주면 됩니다.
    (별도로 css에서 조절할 필요 X)
  • display:inline-block 성질
    → video태그와 동일하게 중앙정렬 시키고 싶다면 display:block 속성으로 변경해서 margin:0 auto 사용하거나 display:block 태그로 감싸준다음 똑같은 가로세로 값을 넣어주고 margin:0 auto를 사용하는 방법
  • iframe 태그의 경우 video 태그와 별개로 옵션을 작성할 때 작성 위치가src="https://www.youtube.com/embed/B8Cv4h_bt0?" src부분 큰따옴표가 끝나는 지점 왼쪽에?를 넣어주고 시작을 해야 한다.
  • 옵션의 종류
    - autoplay = 1 (자동재생)
    - mute = 1 (음소거)
    - controls = 0 (기본값은 1) (유튜브 동영상에 재생 일시정지 음소거 및 기타 컨트롤 버튼을 없애주는 기능)
      cf) controls 기능을 사용해도 로고 및 제목 기타 등등 없애지 못하는 존재들이 있다.
    - loop = 1 (동영상이 끝나면 다시 처음부터 다시 실행)
    - playlist = 유튜브 고유 코드
      cf) iframe태그에서 loop기능의 경우 혼자서 사용하면 적용이 되지 않는다. 그래서 playlist코드와 함께 유튜브 src 끝부분 고유 유튜브 코드 부분을 복사해서 playlist코드와 함께 유튜브 src끝부분 고유 유튜브 코드 부분을 복사해서 playlist= 붙여 넣기 해주면 동영상 반복 재생이 가능하다.
      ex) src="https://www.youtube.com/embed/B8Cv4h_bt0I0"
           loop = 1&playlist = B8Cv4h_bt0
    - 옵션 사용 시 autoplay=1&mute=1 중간에 & 기호가 들어가야 한다.
  • <iframe> 태그 유튜브 장단점
    - 단점
      1. video태그에 비해서 인터페이스 부분에서 자잘한 내용이 많이 있어 몰입도가 떨어진다 (디자인적으로 이쁘지 않다.)
      2. 동영상 올린 사람이 동영상 삭제하면 우리 것도 같이 내려갑니다.
    - 장점
      1. video 태그에 비해서 사이트에 로딩 속도에 영향을 끼치진 않는다.
      2. 유튜브 동영상 - 채널 홍보가 된다.
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>video태그 #3</title>
    <style>
        *{margin:0;padding:0;}
        iframe{margin:0 auto;display:block;}
    </style>
</head>
<body>
        <iframe width="100%" height="1000" src="https://www.youtube.com/embed/B8Cv4h_bt0I?autoplay=1&mute=1&loop=1&playlist=B8Cv4h_bt0I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>​
  • 참고
    유튜브 동영상을 정말 사용하고 싶은데 iframe이 아닌 video태그로 사용하고 싶다면 검색창에 youtube mp4 converter 검색 후 사이트 접속해서 주소 입력란에 원하는 유튜브 동영상 넣어준 다음 컨버팅 해줘서 mp4 파일로 다운로드 후 video태그 사용해주면 된다. 
728x90
저작자표시

'Front-End (웹) > HTML' 카테고리의 다른 글

<dfn>, <time>, <wbr> 태그  (0) 2021.08.24
입력 양식  (0) 2021.08.24
<video>, <audio> 태그  (0) 2021.08.19
시멘틱  (0) 2021.08.16
목록 태그  (0) 2021.07.27
'Front-End (웹)/HTML' Related Articles more
Comments