본문 바로가기
Project

[참고 자료] Youtube 링크 첨부하기(Community Website)

by 공프 Gongp 2023. 6. 29.
반응형

먼저 저는 이클립스를 사용하여 프로젝트를 진행하려합니다.

 

정말 인텔리제이를 쓰고 싶지만 불편하거나 에러를 많이 겪었지만

그럼에도 실습을 가장 많이 해본 게 이클립스라

빠른 기간안에 프로젝트를 완성하기 위해 이클립스를 선택하게 되었습니다.

 

다음으로는 기초 설정으로, 서버나 db 구축해서 연결해야 합니다.

이에 대한 내용은 나중에 프로젝트 결과 정리하면서 한번에 정리 및 소개하려합니다.

 

마지막으로 오늘 테스트한 유튜브 링크를 웹페이지에 올리는 것입니다.

생각보다 간단? 해서 놀랐지만 나중에는 링크확인해서

유튜브 링크라면 아래와 같이 표시되도록 설정할 계획입니다.

 

유튜브에서 영상을 선택하고 공유를 하면 선택지가 생깁니다.

여기서 퍼가기를 선택하시면

이렇게 코드가 생성됩니다. 이를 복사한 후 웹페이지 내의 코드로 삽입했더니

아래와 같이 표시되는 것을 볼 수 있었습니다.

 

코드를 삽입하고 실행한 사진입니다.

해당 코드는 링크만 바꾸면 여러 영상에 적용시킬 수 있었습니다.

 

 

이렇게 해당 코드 참고해서 프로젝트 진행하면 될 것 같습니다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<h1>Test</h1>
	<hr>
	<p>
		테스트 중입니다. 확인해주세요 <br> hello
	</p>
	<iframe width="560" height="315"
		src="https://www.youtube.com/embed/xNcWZpufxb4"
		title="YouTube video player" frameborder="0"
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
		allowfullscreen></iframe>
	<br>
	<iframe width="560" height="315"
		src="https://www.youtube.com/embed/IGQbgkNFMhk"
		title="YouTube video player" frameborder="0"
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
		allowfullscreen></iframe>
</body>
</html>

 

오늘도 끝까지봐주신 분들 모두 감사합니다.

반응형