반응형
Youtube같은 웹사이트를 사용할 수 있는 iframe 태그를 알아봅시다.
iframe 태그로 유튜브 동영상을 삽입할 수 있습니다.
1. 원하는 유튜브에서 공유하기 버튼 클릭
2. 맨 왼쪽의 퍼가기 버튼 클릭
3. iframe 코드 복사
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>
유튜브나 지도 같은 외부 서비스를 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
반응형
'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 |
