☰

DoodStream Vertical Video Fix

Some vertical videos are getting stretched to widescreen. This adds a button (next to full-screen) to force them back to portrait

  1. // ==UserScript==
  2. // @name         DoodStream Vertical Video Fix
  3. // @description  Some vertical videos are getting stretched to widescreen. This adds a button (next to full-screen) to force them back to portrait
  4. // @match        https://*.dood.tld/*
  5. // @match        https://*.d0*0d.tld/*
  6. // @match        https://*.ds2play.tld/*
  7. // @version      0.2
  8. // @author       mica
  9. // @namespace    greasyfork.org/users/12559
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. const style = document.createElement('style');
  14. style.innerHTML = `
  15. button.ar-fix span.vjs-icon-placeholder:before {
  16.     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40' x='0px' y='0px'%3E%3Cg%3E%3Cpath d='M26,31H6a1,1,0,0,1-.9-1.45A31,31,0,0,0,8,16,31,31,0,0,0,5.1,2.45,1,1,0,0,1,6,1H26a1,1,0,0,1,.9,1.45A31,31,0,0,0,24,16,31,31,0,0,0,26.9,29.55,1,1,0,0,1,26,31ZM7.56,29H24.44A34.23,34.23,0,0,1,22,16,34.23,34.23,0,0,1,24.44,3H7.56A34.23,34.23,0,0,1,10,16,34.23,34.23,0,0,1,7.56,29Z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E") !important;
  17. }`;
  18. document.querySelector('head').append(style);
  19.  
  20. const btn = document.createElement('button');
  21. btn.classList.add('ar-fix', 'vjs-control', 'vjs-button');
  22. btn.title = 'Squish to Portrait';
  23. btn.onclick = () => document.querySelector('video').style.scale = '0.27 1.2';
  24. const span = document.createElement('span');
  25. span.classList.add('vjs-icon-placeholder');
  26. btn.append(span, document.createElement('span'));
  27. document.querySelector('button.vjs-fullscreen-control').before(btn);