[축구모임 홈페이지개발] 02/01 개발일지 Nodejs css / html 에 유튜브 영상 올리기

영상 탭을 구현해보려고 한다.

 

우선 검색을 해보니

 

                    <iframe width="560" height="315" src="https://www.youtube.com/embed/ㅇㅇㅇ" frameborder="0" allowfullscreen></iframe>

 

 

그냥 단지 이 코드만 넣어주면 내 페이지에 youtube 영상을 띄울 수 있다.

 

나는 운영관리 탭에서 링크를 입력하면 알아서 영상이 올라가는 기능을 구현할 것이다.

 

예를들어 유튜브 링크가 

 

https://www.youtube.com/watch?v=eqnaRtqFWy8

 

이거라면 나는 저 등호 = 뒤에 있는 코드를 가져와서 

 

https://www.youtube.com/embed/ㅇㅇㅇ 

 

위의 ㅇㅇㅇ 자리에 넣어주면 되는 것이다.

 

유튜브 링크가 입력되었을 때 등호 뒤에 값을 가져오기 위해서

 

 

    function UploadYoutube() {

    // 입력된 YouTube URL 가져오기

    var fullURL = document.getElementById('inputYoutubeURL').value;

    // "v=" 이후의 부분 추출

    var videoIdStartIndex = fullURL.indexOf('v=') + 2; // 'v=' 다음부터 시작

    var videoId = fullURL.substring(videoIdStartIndex);

    // 중간에 나오는 &를 ?로 바꿔서 출력

    var modifiedVideoId = videoId.replace(/&/g, '?');

    location.href = `/UploadURL?URL=${encodeURIComponent(modifiedVideoId)}`;

}

 

위와 같이 코드를 짜줬고,

 

그대로 저장된 값을 embed/ 뒤에 넣어주게 했다.

 

            <% for ( i=0; i<URL.length; i++) {%>

                <div class="story-photo-area">

                    <iframe src="https://www.youtube.com/embed/<%=URL[i].URL%>" frameborder="0"

                        allowfullscreen></iframe>

                        <% if (유저 == '관리자') {%>

                    <div><a style="color: white;" href="#" onclick="confirmDeleteVideo(event)" data-video-id="<%=URL[i]._id%>">삭제</a></div>

                            <%}%>

                </div>

                <%}%>