본문 바로가기

Coding/Html

Html iframe 태그 알아보기(Youtube)

반응형

Html iframe 태그 알아보기(Youtube)

 

Youtube같은 웹사이트를 사용할 수 있는 iframe 태그를 알아봅시다.

 

 

iframe 태그로 유튜브 동영상을 삽입할 수 있습니다.

 

1. 원하는 유튜브에서 공유하기 버튼 클릭

 

2. 맨 왼쪽의 퍼가기 버튼 클릭

Html iframe 태그 알아보기(Youtube)(2)

 

3. iframe 코드 복사

Html iframe 태그 알아보기(Youtube)(3)

 

4. Html 파일에 붙여넣기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <iframe width="560" 
            height="315" 
            src="https://www.youtube.com/embed/a_k-dCgubFo?si=qc_ZCNdrsjLvWZIf" 
            title="YouTube video player" 
            frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
            allowfullscreen>
    </iframe>
  </body>
</html>

Html iframe 태그 알아보기(Youtube)(4)

 

 

유튜브나 지도 같은 외부 서비스를 iframe으로 내 웹사이트에 삽입하는 것을 임베딩(embedding)이라고 합니다.

 

서비스를 잘 찾아보면, 간혹 임베딩 할만한 서비스들이 있어요.

  • Youtube
  • Google Maps
  • Twitter(X)
  • MM(Mark up manager) - 제가 만들었습니다ㅎ

 


웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요.

 

https://zabefofoon.github.io/mm-guide/


로또 번호 생성기도 만들었습니다. 한번 구경해보세요.

 

https://zabefofoon.github.io/simple-lotto/?lotto=lottoKoea


 

 

관련글: 주요 Html 태그 알아보기

반응형

'Coding > Html' 카테고리의 다른 글

Html table 태그 알아보기  (84) 2023.12.26
Html video 태그 알아보기  (81) 2023.12.25
Html img 태그 알아보기  (78) 2023.12.25
Html div 태그 알아보기  (84) 2023.12.25
Html a 태그 알아보기  (78) 2023.12.25