HTML <embed> 태그는 이미지, 비디오 및 기타 웹 페이지와 같은 다양한 유형의 콘텐츠를 웹 페이지에 포함하는 데 사용할 수 있습니다. 이 랩에서는 HTML <embed> 태그를 사용하여 YouTube 비디오를 웹 페이지에 추가합니다.
참고:
index.html에서 코딩을 연습할 수 있으며 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
index.html이라는 새 파일을 만듭니다.
index.html 파일을 만들었으면 head 및 body 요소를 사용하여 HTML 문서의 기본 구조를 추가합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Embed Tag Lab</title>
</head>
<body></body>
</html><embed> 태그를 사용하여 비디오 추가하기웹 페이지에 비디오를 추가하려면 YouTube 임베드 코드를 사용해야 합니다.
YouTube에서 아무 비디오나 탐색합니다.
비디오 아래에서 "공유" 버튼을 클릭한 다음 "임베드" 버튼을 클릭합니다. 그러면 비디오 임베드 창이 열립니다.
비디오 임베드 창에 나타나는 HTML 코드를 복사합니다.
<body> 요소 내의 index.html 파일에 코드를 붙여넣습니다.
<embed src="https://www.youtube.com/embed/TWfph3iNC-k" />크기 문제를 방지하려면 비디오의 너비와 높이를 설정하는 것이 중요합니다.
<embed> 태그에 height 및 width 속성을 추가합니다. width 속성은 비디오의 너비를 정의하고, height 속성은 높이를 설정합니다.
<embed
src="https://www.youtube.com/embed/TWfph3iNC-k"
width="560"
height="315"
/>index.html 파일을 저장하고 웹 브라우저에서 열어 비디오가 성공적으로 추가되었는지 확인합니다.
모든 브라우저가 <embed> 태그를 지원하는 것은 아닙니다. 지원되지 않는 브라우저를 사용하는 사용자를 위해 웹 페이지가 여전히 작동하도록 하려면 대체 옵션을 추가할 수 있습니다.
임베드할 콘텐츠의 유형과 임베드할 리소스의 URL 을 지정하는 매개변수를 사용하여 <object> 태그를 추가합니다.
<object
type="text/html"
data="https://www.youtube.com/embed/TWfph3iNC-k"
width="560"
height="315"
>
<p>
Your browser does not support the HTML5 Video element. Please upgrade to
a modern browser.
</p>
</object>index.html 파일을 저장하고 Internet Explorer 와 같이 <embed> 태그를 지원하지 않는 브라우저에서 엽니다. 대체 옵션이 작동하는지 확인합니다.
축하합니다! HTML <embed> 태그를 사용하여 웹 페이지에 비디오를 추가하는 방법을 성공적으로 배웠습니다. 브라우저 지원을 확인하고 필요한 경우 대체 옵션을 사용하는 것을 잊지 마세요.
