[개인프로젝트] Garden of Books 책들의정원 12(동영상 불러오기 + "youtube.com에서 연결을 거부"시 해결방법)

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

 

오늘은 외부의 영상링크를 불러와 화면에 띄울 수 있는 동영상 불러오기 실습을 해보도록 하겠습니다.
"youtube.com에서 연결을 거부"시 해결방법도 함께 아래에 있으니 위의 동영상 불러오기 내용이 필요치 않으신 분들은 아래의 내용으로 "youtube.com에서 연결을 거부" 오류를 해결하시기 바랍니다.

 

동영상 불러오기

<div class="container">
    <div class="row">
        <ul class="list-group">
            <a href="#" class="list-group-item active">경제/심리학</a>
            <a href="#" class="list-group-item" data-target="#modal1" data-toggle="modal">강신주의 감정수업</a>
            <a href="#" class="list-group-item" data-target="#modal2" data-toggle="modal">생각의 각도</a>
            <a href="#" class="list-group-item" data-target="#modal3" data-toggle="modal">인간적인 너무나 인간적인</a>
            <a href="#" class="list-group-item" data-target="#modal4" data-toggle="modal">백 마디 말보다 강력한 행동의 심리학</a>
        </ul>
    </div>
    <div class="row">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/9BRB7ViKo8o?si=dnH9NFayzUIOdFoi"></iframe>
        </div>
    </div>
</div>

위의 리스트 그룹 마지막 div 바로 위에 새로운 div로 embed div를 만들어줍니다. 
embed-responsive-16by9로 '16by9'는 최상의 해상도를 의미합니다. 자신이 원하는 영상의 해상도로 적어줄 수 있습니다.

그리고 아래에 iframe으로 클래스명을 넣고 src="" 큰따옴표 내에 해당 영상의 주소 링크를 붙여 넣어줍니다. 
단순히 해당 영상 주소창 링크의 id값을 가지고 붙여 넣으면 유튜브 영상 연결을 거부할 수 있으니, 아래의 방법을 따라 해당 영상의 링크를 복사하여 붙여 넣는 것을 추천합니다. 

 

<화면 출력 모습>

화면을 줄였을 때 반응형으로 동영상의 크기가 자동으로 줄어드는 것을 확인 할 수 있습니다.

이처럼 동영상 불러오기 작업을 통해 해상도 또한 자신의 마음대로 조절할 수 있고, 유튜브 영상뿐만 아니라 다양한 영상을 불러올 수 있습니다.

 

유튜브 영상 "youtube.com에서 연결을 거부"시 어떻게 해야할까?

유튜브 영상 삽입 오류 연결 거부에 대한 올바른 해결방법은 해당 주소창 링크의 id값 말고 '퍼가기 공유용 주소'를 붙여넣어야 합니다. 
유튜브 영상 아래에 있는 <> 모양의 '퍼가기' 버튼을 눌러 팝업창이 뜨면 나오는 코드에 있는 위와 같은 src=""의 이 주소를 붙여 넣어야 됩니다. 
부트스트랩을 이용하여 간단하게 동영상 불러오기 실습을 하려던 거였는데, 의외로 유튜브 영상 연결이 거부되어서 당황스러웠습니다. 하지만 위에 있는 소스와 같은 양식의 주소 변경만으로 이 오류를 해결하는데 것은 간단했습니다.

☆ 유튜브도 모바일 기기 호환을 위해 여러 정책 변경이나 시스템 변경을 이루기 때문에 이렇듯 변경되는 점들을 캐치해야 하겠습니다.