Keeps video player where it always looks good, even without scrolling.
// ==UserScript==
// @name Gelbooru Size Video in View
// @namespace https://greasyfork.org/en/users/460331-xerodusk
// @version 3.1.0
// @description Keeps video player where it always looks good, even without scrolling.
// @author Xerodusk
// @homepage https://greasyfork.org/en/users/460331-xerodusk
// @license GPL-3.0-or-later
// @match https://gelbooru.com/index.php?page=post&s=view*
// @grant none
// @icon https://gelbooru.com/favicon.png
// ==/UserScript==
/* jshint esversion: 6 */
(function() {
'use strict';
// Get current video elements
const video = document.getElementById('gelcomVideoPlayer');
if (!video) {
return;
}
const webm = video.querySelector('[type="video/webm"]');
const mp4 = video.querySelector('[type="video/mp4"]');
// Create replacement video element
// Necessary to detach terrible breaking scripts present on the original player
const newVideo = document.createElement('video');
newVideo.id = 'newGelcomVideoPlayer';
newVideo.controls = 'controls';
newVideo.flashstopped = 'true';
newVideo.name = 'media';
newVideo.loop = 'loop';
newVideo.preload = 'metadata';
// Copy over attributes from current video element
newVideo.width = video.width;
newVideo.height = video.height;
newVideo.poster = video.poster;
newVideo.appendChild(webm);
newVideo.appendChild(mp4);
// Get distance from top of page to video
const distanceToTopVideo = window.pageYOffset + video.getBoundingClientRect().top;
// Get distance from bottom of video to under links
const underLinks = document.getElementById('scrollebox');
const distanceToTopLinks = underLinks.getBoundingClientRect().top - video.getBoundingClientRect().bottom;
// Get height of under links
const distanceToBottomLinks = underLinks.offsetHeight;
const paddingToLeave = distanceToTopVideo + (distanceToTopLinks * 2) + distanceToBottomLinks;
// Apply styling to fix size
const css = document.createElement('style');
css.appendChild(document.createTextNode(`
#newGelcomVideoPlayer {
width: auto !important;
height: auto !important;
max-width: min(100%, 1272px) !important;
max-height: calc(100vh - ${paddingToLeave}px) !important;
}
`));
document.head.appendChild(css);
// Replace video element
video.before(newVideo);
video.remove();
})();