YouTube の動画を90度回転させる【ブックマークレット】

パソコンのブラウザで YouTube を見ているとスマホで撮った動画を横向きにしている動画って見かけませんか？、これはそのまま動画を縦置きにしてしまうと左右に大きな余白ができるから、また横向きにする事で左右の余白が消えて動画大きく拡大された状態になるからだと思います、でも当然ですが横向きにしているので動画の中の人物も横向きになってしまいそれが気になる方もいらっしゃるのではないでしょうか？、なので動画をできるだけ大きく拡大して見せるために横向きにしているチャンネルもあれば、左右に大きな余白ができてもいいからちゃんとした方向で見れるように動画を縦向きにしているチャンネルもどちらもありますよね、例えば VLC などの動画プレイヤーには動画を回転する機能が付いている事が多いですが残念ながら YouTube にこの機能は付いていません、拡張機能を追加すれば簡単に実装可能ですがこういった拡張機能は求める権限も非常に強いのでできればインストールしたくないという方も多いですよね、という事でこちらではデスクトップ版の YouTube で動画を90度回転させるブックマークレットの作成方法をご紹介してみたいと思います。

まずはこちらをご覧ください、こちらが今回の本題のスマホで撮った動画を横向きで公開している動画なのですがこのような動画を見たことはありませんか？、ライブやイベント系の動画ではこのスタイルって結構見かけますよね、横向きにする事で左右の余白が消えて動画が大きく見えますが、動画を横向きにしているので当然ながら中の人もこのように横向きの状態になってしまいます。

逆にこのような動画も見かけますよね、スマホ動画で縦長なのでそのまま縦置きするとこのように左右に盛大に余白ができて動画も小さくなっちゃいますが、ちゃんとした方向なので動画の中の人が横向きになったりはしません、今回ご紹介するブックマークレットを使って動画を90度回転させると先程の横向きの動画をこのように縦向きにする事ができるんです。

では動画を回転させるブックマークレットを作成してみましょう、今回は Chrome を例にして作成してみますね、まずはブックマークバーの何もないところを右クリックして開いたメニューから「ページを追加」を選択してください。

「ブックマークを編集」が開いたらまずは「名前」のボックスを入力します、こちらで入力した名前がブックマークの名前になるので分かりやすい名前にしましょう。

次は下記のコードをコピーしてその下の「URL」のボックスに貼り付けます、貼り付けたら「保存」ボタンをクリックすると。

javascript:(function(){  const player = document.querySelector('.html5-video-player');  if(!player) return;  let deg = (parseInt(player.dataset.rot || 0) + 90) % 360;  player.dataset.rot = deg;  player.style.transform = `rotate(${deg}deg) ` + (deg % 180 !== 0 ? %27scale(0.5625)%27 : %27scale(1)%27);  player.style.transformOrigin = %27center center%27;  player.style.transition = %27transform 0.3s ease%27;})();