Webページの背景に動画を表示する方法です。
https://github.com/pupunzi/jquery.mb.YTPlayer
からダウンロードし
Distフォルダ内のj query.mb.YTPlayer.min.jsと
Dist\cssフォルダ内のjquery.mb.YTPlayer.min.css
をhtmlファイルと同じフォルダ内に置きます。
HTMLファイルは次のコードになります。
<!DOCTYPE html> <html> <head> <link href="jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="jquery.mb.YTPlayer.min.js"></script> <script> jQuery(function(){ var myPlayer; myPlayer = jQuery("#bgVideo").YTPlayer({}); }); </script> </head> <body> <!--<button onclick="jQuery('#bgVideo').YTPToggleVolume()">Mute/Unmute</button> <button onclick="jQuery('#bgVideo').YTPFullscreen()">Fullscreen</button>--> <input id="videoID" type="text" value="RawC-7fxME0" onfocus="$('#loadOptions').slideDown()"> <button onclick="jQuery('#bgVideo').YTPChangeMovie({videoURL: $('#videoID').val(), mute: false,stopMovieOnBlur: false,showControls: true, loop: true, autoplay: true, ratio: 16/9})">change video</button> <div class="video" id="bgVideo" data-property="{ videoURL: 'biMO46z_VSY',containment:'body', mute: false,stopMovieOnBlur: false,showControls: true, loop: true, autoplay: true, ratio: 16/9,opacity:1,addFilters: {grayscale: 50,sepia: 80,opacity: 30}}">jquery.mb.YTPlayer</div> </body> </html>
初期値の動画を変更する場合はコード内のvideoURL: '***********'の*に
YouTubeの動画へのリンクを入力してください。
テキストボックスにYouTubeのリンクを入力して「change video」ボタンを
押すことで動画を変更することができます。
テキストボックスに入力する動画の指定方法は以下の3タイプが指定できます。
https://www.youtube.com/watch?v=V2rifmjZuKQ
http://youtu.be/V2rifmjZuKQ
V2rifmjZuKQ
設定やメソッドなどの詳しい情報は
https://github.com/pupunzi/jquery.mb.YTPlayer/wiki
を見てください。
因みにChromeではファイルを直接開いても再生されますが、
EdgeではWebサイトにアクセスしないと再生されません。
Edgeの場合はIISなどをインストールするなどしてWebサイトから
ファイルを呼び出して確認してください。
補足情報
以前のバージョンでは動画変更するのにはYTPChangeVideoが
使われていましたが新しいバージョンではYTPChangeMovieになりました。
参考デモページ
https://pupunzi.com/mb.components/mb.YTPlayer/demo/demo.html
