[HTML] 웹페이지에 유튜브 삽입 - <Ifram>
2024. 4. 6. 22:50ㆍ프로그래밍 언어/HTML\CSS
<Ifram>
<iframe> 태그는 다른 웹페이지를 현재 페이지에 삽입하는 데 사용된다. 주로 외부 웹페이지를 내부에 포함시키는 데 사용된다. 많이 사용되는 Attribute를 알아보자.
유용한 Attribute
- src (필수): 삽입할 외부 페이지의 URL 지정
- width, height: <iframe>의 가로 및 세로 크기를 지정
- title: <iframe>에 대한 제목을 지정한다. 웹 접근성을 고려할 때 중요한 속성이다.
- sandbox: 보안을 강화하기 위해 <iframe>의 실행 환경을 제한한다.
- allow: <iframe>에서 허용할 작업을 지정한다. allow="fullscreen" 과 같이 사용하면, <iframe>에서 전체 화면을 허용하는 것이다.
- frameborder: <iframe> 주위에 테두리를 표시할지 여부를 정한다.
- scrolling: <iframe> 내에서 스크롤바를 표시할지 여부를 정한다.
<iframe> 사용 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IFrame Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Check out this embedded YouTube video:</p>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</body>
</html>이 예제에서는 YouTube를 <iframe>을 사용하여 현재 페이지에 삽입하였다. src 속성에는 YouTube 비디오의 URL이 포함되어 있으며, width 및 height 속성을 사용하여 비디오의 크기를 조정했다. 또한 title 속성은 웹 접근성을 향상시키기 위해 사용되었고, allow 속성은 YouTube 비디오 재생을 허용하기 위해 설정되었다. allow 속성은 필요한 권한이 있다면 찾아보자.
'프로그래밍 언어 > HTML\CSS' 카테고리의 다른 글
| [HTML] <pre> 태그, 주석 등 Text Elements (0) | 2024.04.08 |
|---|---|
| [HTML] 사용자 입력 받기 - <form>, <label>, <input> (0) | 2024.04.07 |
| [HTML] 웹사이트 간단하게 만들기 (0) | 2024.04.05 |
| [HTML] HTML의 기본 구조 <title>, <meta>와 <a> (0) | 2024.04.05 |
| [HTML] 부모 태그와 리스트 태그 <ul>, <ol>, <li> (0) | 2024.04.05 |