[Spring Boot] 유튜브 API 활용해서 특정 키워드 영상 페이지에 출력하기

728x90

프로그래밍 세계를 탐구합시다.

유튜브 API를 활용해서 영상 데이터를 페이지에 출력할 수 있습니다.

구현 화면

유튜브 API를 이용해 전기차 관련 영상을 출력하였습니다. 카테고리를 전기차와 친환경으로 나누어 항목에 따라 다른 영상을 볼 수 있게 하였습니다.

작성 코드

HomeController.java

@GetMapping("/media/reels")
	public String reels(Model model) {
		User user = (User) session.getAttribute("user_info");
		if (user != null) {
			int userCoins = user.getCoin();
			model.addAttribute("userCoin", userCoins);
		}

		return "/media/reels";
	}

reels.html

<!DOCTYPE html>
<html>

<head th:replace="common/head">

</head>

<style>
    @font-face {
        font-family: 'TheJamsil5Bold';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
    }

    body {
        font-family: 'TheJamsil5Bold';
        height: 100vh;
        /* 화면 높이의 100%로 설정 */
        background-color: #000;
        background-size: cover;
        /* 이미지를 화면에 맞게 조절 */
        background-repeat: no-repeat;
        /* 이미지 반복을 중지 */
    }

    #videos {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center; /* 추가된 스타일 */
        height: 100vh; /* 추가된 스타일 */
    }

    /* 영상 컨테이너 스타일 */
    .video-container {
        width: 30rem;
        margin: 2rem;
        box-sizing: border-box;
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .video-container iframe {
        width: 100%;
        height: 17rem;
        border: none;
        border-radius: 5px;
    }

    .video-container:hover {
        transform: translateY(-5px);
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    }

    .video-title {
        margin: 1rem;
        font-size: 1rem;
        color: #333;
        text-align: center;
    }


    /* 모달 스타일 */
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.7);
    }

    .modal-content {
        position: relative;
        background-color: rgba(0, 0, 0, 0.7);
        margin: 10% auto;
        padding: 20px;
        width: 80%;
        max-width: 800px;
    }

    .close {
        position: absolute;
        right: 10px;
        top: 0;
        color: white;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }
</style>

<body>
    <div th:replace="common/header"></div>

    <nav th:replace="common/nav"></nav>

    <div style="text-align: center;">
        <label for="electricCarCheckbox" style="color: white;">
            <input type="checkbox" id="electricCarCheckbox" onchange="updateVideos" checked>
            전기차
        </label>

        <label for="ecoCheckbox" style="color: white;">
            <input type="checkbox" id="ecoCheckbox" onchange="updateVideos">
            친환경
        </label>
    </div>

    <div id="videos"></div>

    <!-- 모달 HTML -->
    <div id="videoModal" class="modal">
        <div class="modal-content">
            <span class="close" id="closeModal">&times;</span>
            <iframe id="videoPlayer" width="730" height="400" src="" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>

    <script src="https://apis.google.com/api주소"></script>

    <script>
        var defaultKeyword = '전기차';

        // Add an event listener to the "친환경" checkbox
        document.getElementById('ecoCheckbox').addEventListener('change', function () {
            // If "친환경" is checked, uncheck "전기차"
            if (this.checked) {
                document.getElementById('electricCarCheckbox').checked = false;
            }
            updateVideos();
        });

        // Add an event listener to the "전기차" checkbox
        document.getElementById('electricCarCheckbox').addEventListener('change', function () {
            // If "전기차" is checked, uncheck "친환경"
            if (this.checked) {
                document.getElementById('ecoCheckbox').checked = false;
            }
            updateVideos();
        });

        var apiKey = '앱키';

        // YouTube Data API 로드
        gapi.load('client', function () {
            gapi.client.init({
                apiKey: apiKey,
                discoveryDocs: ["https://www.googleapis.com/구글api"]
            }).then(function () {
                // YouTube API 초기화 성공
                searchVideos(defaultKeyword);
            });
        });

        // 체크박스 상태를 확인하고 검색어 업데이트
        function updateVideos() {
            var electricCarCheckbox = document.getElementById('electricCarCheckbox');
            var ecoCheckbox = document.getElementById('ecoCheckbox');

            var keyword = '';

            if (electricCarCheckbox.checked && ecoCheckbox.checked) {
                // 두 체크박스 모두 선택된 경우, 모든 동영상을 검색합니다.
                keyword = '전기차 충전소';
            } else if (electricCarCheckbox.checked) {
                keyword = '전기차';
            } else if (ecoCheckbox.checked) {
                keyword = '친환경';
            } else {
                // 모든 체크박스가 선택 해제된 경우 기본 키워드로 검색
                keyword = defaultKeyword;
            }

            searchVideos(keyword);
        }

        // 특정 키워드로 동영상 검색
        function searchVideos(keyword) {
            gapi.client.youtube.search.list({
                q: keyword,
                part: 'snippet',
                maxResults: 4
            }).then(function (response) {
                var videos = response.result.items;
                displayVideos(videos);
            });
        }

        function decodeHTMLEntities(text) {
            var textArea = document.createElement("textarea");
            textArea.innerHTML = text;
            return textArea.value;
        }

        // 동영상을 HTML에 표시
        function displayVideos(videos) {
            var videosDiv = document.getElementById('videos');

            // Remove all existing videos
            while (videosDiv.firstChild) {
                videosDiv.removeChild(videosDiv.firstChild);
            }

            videos.forEach(function (video) {
                var videoId = video.id.videoId;
                var title = decodeHTMLEntities(video.snippet.title);

                // 영상 컨테이너 생성
                var videoContainer = document.createElement('div');
                videoContainer.className = 'video-container';

                // iframe 생성
                var videoFrame = document.createElement('iframe');
                videoFrame.src = 'https://www.youtube.com/embed/' + videoId;

                // 제목 생성
                var videoTitle = document.createElement('h2');
                videoTitle.textContent = title;
                videoTitle.className = 'video-title';

                // 영상, 제목을 컨테이너에 추가
                videoContainer.appendChild(videoFrame);
                videoContainer.appendChild(videoTitle);

                // 컨테이너를 videosDiv에 추가
                videosDiv.appendChild(videoContainer);

                // 영상 클릭 시 모달 열기
                videoContainer.addEventListener('click', function () {
                    openModal(videoId);
                });

            });
        }

        // 모달 열기
        function openModal(videoId) {
            var modal = document.getElementById('videoModal');
            var videoPlayer = document.getElementById('videoPlayer');
            videoPlayer.src = 'https://www.youtube.com/embed/' + videoId;
            modal.style.display = 'block';
        }

        // 모달 닫기
        function closeModal() {
            var modal = document.getElementById('videoModal');
            var videoPlayer = document.getElementById('videoPlayer');
            videoPlayer.src = '';
            modal.style.display = 'none';
        }

        // 모달 닫기 버튼 클릭 시 닫기
        document.getElementById('closeModal').addEventListener('click', closeModal);

        // 모달 영역 외를 클릭하여도 닫기
        window.onclick = function (event) {
            var modal = document.getElementById('videoModal');
            if (event.target === modal) {
                closeModal();
            }
        };
    </script>
</body>

</html>

위 방식을 활용하여 유튜브 영상을 페이지에 출력할 수 있습니다.

728x90

저작자표시 비영리 변경금지

'IT > Java - Spring Boot' 카테고리의 다른 글

[Spring Boot] thymeleaf 의존성 추가하기 (Controller가 templates의 html을 인식하지 못할 때) (0)	2024.01.19
[Spring Boot] 회원가입/ 회원정보수정/ 회원탈퇴/ 비밀번호 변경 (1)	2023.11.01
[Spring Boot] 게시판 만들기 (1)	2023.11.01
[Spring Boot] 카카오 지도 api 활용하여 지도 출력하기 (1)	2023.11.01
[Spring Boot] 페이지에 상단 바 코딩하기 (0)	2023.11.01