Video.jsでYoutube動画を取り扱う方法
2025/03/19
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%;」が効くためレスポンシブ対応となる。
関連記事
-
-
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ファイルか ...