勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

   2025/03/19  JavaScript

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%;」が効くためレスポンシブ対応となる。

 - JavaScript

  関連記事

Video.jsで表示させた動画プレイヤーにロゴ画像(透かし)を追加する方法(videojs-logo)

Video.jsで表示させた動画プレイヤーの右上等、指定の位置にロゴ画像(透かし ...

vimeoの動画URLからサムネイル画像用URLを取得する方法(oEmbed API)

vimeoの動画URL(https://vimeo.com/xxxxx)からサム ...

ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法

ボタンやリンクをクリックした際、Video.jsの動画プレイヤーをモーダルウィン ...

Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、位置をランダムに変更する方法

Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、さらにそのテ ...

JavaScriptの動画プレイヤー用ライブラリ「Video.js」の利用方法

サイト内でYoutube等の動画サイトの埋め込みタグは使用せず、mp4ファイルか ...