Video.js / videojs-yotube : video js로 유튜브 영상 재생하기

아직 업로드할 동영상에 대한 상세 설명을 듣지 못했기 때문에 일단 Video js로 작업을 진행했다.

youtube 동영상을 재생하게 된다면 아마도 youtube player api로 변경할 듯하다. 

 

 

1. css와 js를 임포트 한다.

<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.1/Youtube.min.js"></script>

 

2. html 작성

<!-- html 파일 중 video 관련 부분만 -->
<div class="content">
    <video
        id="myPlayer"
        class="video-js vjs-default-skin vjs-16-9"
        controls
        autoplay
        muted
        loop
        style="position: absolute; top: 0; left: 0; overflow:hidden; z-index: -999;"

        data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "유튜브주소"}] }'
    > </video>
</div>

 

3. css 작성

.content {
    width: 100%; height: 100vh; max-width: 100%;
    background: darkolivegreen; overflow: hidden;
}

 

 

 

끝!