プログラミング

SafariでもOK!動画を21:9のウルトラワイドモニタ全体に表示するブックマークレット

ウルトラワイドモニターで動画を画面いっぱいに表示させたいときには、Chromeの拡張機能「UltraWide Video」を使っているんですが、どうしてもSafariで同じ機能を実現したくてブックマークレットを作りました。

SafariでもChromeでも、YouTube・Prime Video・Hulu・Netflixでも拡大できたので、ぜひお使いください。

なぜ、ウルトラワイドモニターでこの機能が必要かについては、OMORODIVEさんの記事がとてもわかり易いのでご紹介させていただきます。
【大迫力】21:9のウルトラワイドモニタで動画を画面いっぱいで楽しもう!【Netflix、Amazonプライムビデオ、Hulu、Youtubeも全部対応!】

1.早速ですがブックマークレットはこちらです

こちらをコピー

javascript:(function(){style=document.querySelector("#UltrawideZoom");if(null===style){var a=screen.width/screen.height/(16/9);1>=a&&(a=1.32933333333333);style=document.createElement("style");style.innerHTML=".videoCrop {transition: transform 300ms;transform: scale("+.997*a+");}.videoUnCrop {transition: transform 300ms;transform: scale(1.0);}";style.setAttribute("id","UltrawideZoom");document.body.appendChild(style)}if("undefined"===typeof active||!1===active){video=document.querySelectorAll("video");for(a=0;a<video.length;++a)video[a].classList.remove("videoUnCrop"),video[a].classList.add("videoCrop");active=!0}else{video=document.querySelectorAll("video");for(a=0;a<video.length;++a)video[a].classList.remove("videoCrop"),video[a].classList.add("videoUnCrop");active=!1}})();

(2023-04-26追記)Netflixでうまく動かなくなっているようなので、改善版作成しました。お試しください。

こちらをコピー

javascript:(function(){function f(g,d){var e=getComputedStyle(g).transform||"",h=/matrix\(([0-9.\-]+),\s*[0-9.\-]+,\s*[0-9.\-]+,\s*([0-9.\-]+),\s*([0-9.\-]+),\s*([0-9.\-]+)\)/,a=e.match(h);if(a){var k=parseFloat(a[1]),l=parseFloat(a[2]),m=parseFloat(a[3]);a=parseFloat(a[4]);e=e.replace(h,"matrix("+k*d+", 0, 0, "+l*d+", "+2*m*d/2+", "+2*a*d/2+")");g.style.transform=e.trim()}}if("undefined"===typeof active||!1===active){for(var c=document.querySelectorAll("video"),b=0;b<c.length;++b)f(c[b],1.3253453333333298);active=!0}else{c=document.querySelectorAll("video");for(b=0;b<c.length;++b)f(c[b],.7545203313048493);active=!1}})();

2.使い方

2-1.利用準備

適当なページをブックマークに登録し、アドレス部分を上記のブックマークレットの文字列に置き換えれば準備OKです。ブックマークのタイトルをわかりやすく「UltraWideZoom」とかにしておくと便利です。ブックマークレットの利用準備については、こちらのページもわかりやすいのでご参照ください。

2-2.動画ページでブックマークレットを実行

ウルトラワイドモニタいっぱいに拡大したい動画ページを開いたら、先程準備をしたブックマークレットを実行してください。先程登録したブックマークをクリックすればOKです。

2-3.最後に全画面表示

ブックマークレットを実行すると動画が拡大されると思うので、その状態で全画面表示すれば横に黒い帯がない、ウルトラワイドモニタいっぱいの動画を楽しむことができます。

2-4.もとに戻したいときは

全画面表示を解除して、もう一度ブックマークレットを実行すれば、もとのサイズに戻ります。動画ページを再読み込みしても戻ります。

3.対応する動画サイト、サブスクは?

もともとAmazonのPrime Videoで使いたくて作ったブックマークレットですが、試したところYouTube・Prime Video・Hulu・Netflixで使用することができました。できるだけ汎用的に作ったので大体のサイトで使えるのではないかなと思っています。

 

-プログラミング
-

© 2024 いですけぶろぐ