Video.jsでYoutube動画を取り扱う方法

Video.jsでYoutube動画を取り扱いたい。具体的にはVideo.jsのガワ(見た目)を保ちつつYoutube動画を再生させたかった。「videojs-youtube」という公式プラグインで対応できるみたい。以下にサンプルと実装方法をメモ。

サンプル

https://taitan916.info/sample/Video.js/plugin/videojs-youtube/

videojs-youtube

Github

https://github.com/videojs/videojs-youtube

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdn.jsdelivr.net/npm/videojs-youtube@3.0.1/dist/Youtube.min.js"></script>

異なるバージョンを利用したい場合は以下から探す。

https://www.jsdelivr.com/package/npm/videojs-youtube

実装方法

ソースコード

<style>
.video-js{
    max-width: 100%;
}
</style>

<div class="video_div">
    <video
        class="video-js vjs-default-skin"
        controls
        width="600"
        data-setup='
            {
                "techOrder": ["youtube"], 
                "sources": [{ 
                    "type": "video/youtube", 
                    "src": "https://www.youtube.com/watch?v=ei8vVDhxBtc"
                }] 
            }
        '
    >
    </video>
</div>

<script src="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/video.js@8.10.0/dist/video-js.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/videojs-youtube@3.0.1/dist/Youtube.min.js"></script>

解説等

「videoタグ内data-setup > sources > src」部分にYoutubeのURLを記述すること。

また、プレイヤーの横幅はvideoタグ内widthで600px指定しており、ブラウザ幅がそれ以下になった場合はCSSの「max-width: 100%;」が効くためレスポンシブ対応となる。